Skip to content

Code diff UI goes misalignment with code review comments #22911

Closed
@wxiaoguang

Description

@wxiaoguang

Description

https://jsfiddle.net/ob0y2x83/

The padding inside td makes the widths of td become larger.

<table style="width: 100%">
  <tr>
    <td style="width: 10px;">a</td>
    <td style="width: 0"></td>
    <td style="width: 10px;">b</td>
    <td style="width: 49%">long content</td>
    
    <td style="width: 10px;">a</td>
    <td style="width: 0"></td>
    <td style="width: 10px;">b</td>
    <td style="width: 49%">long content</td>
  </tr>
  <tr>
    <td colspan="4">
      <div style="width: 30%"> 
        <div style="padding-left: 100px;">
          with padding
        </div>
      </div>
    </td>
    <td colspan="4">
      <div style="width: 30%"> 
        <div style="padding-left: 100px;">
          with padding
        </div>
      </div>
    </td>
  </tr>
</table>

<hr>

<table style="width: 100%">
  <tr>
    <td style="width: 10px;">a</td>
    <td style="width: 0"></td>
    <td style="width: 10px;">b</td>
    <td style="width: 49%">long content</td>
    
    <td style="width: 10px;">a</td>
    <td style="width: 0"></td>
    <td style="width: 10px;">b</td>
    <td style="width: 49%">long content</td>
  </tr>
  <tr>
    <td colspan="4">
      <div style="width: 30%"> 
        <div style="padding-left: 0;">
          no padding
        </div>
      </div>
    </td>
    <td colspan="4">
      <div style="width: 30%"> 
        <div style="padding-left: 0;">
          no padding
        </div>
      </div>
    </td>
  </tr>
</table>

image

image

Metadata

Metadata

Assignees

No one assigned

    Labels

    topic/uiChange the appearance of the Gitea UItype/bug

    Type

    No type

    Projects

    No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions