尽管具有框大小，但表格单元格仍会增加宽度:边框框 [英] Table cells increases width despite box-sizing: border-box

问题描述

当我单击按钮 View 时，我想在表格的单元格中添加填充，但这会增加单元格的宽度.我已经看到

点击 View 按钮后，列的宽度将变宽:

如何避免增加像元​​宽度?我只想将文本稍微移到 td 的右侧，该文本包含数据'a'，'b'，'c'和'1'和'2'.，而不是在所有单元格中.

不希望同时更改单击时的列宽，我希望这3列在80px处向右移动?

解决方案

尝试使用以下代码，我能够与您验证角度代码:

  * {-moz-box-sizing:边框框；-webkit-box-sizing:边框框;框大小:border-box；}桌子 {边界崩溃:崩溃；宽度:100％;table-layout:fixed;}表td，表th {边框:1px纯红色；红色;}表tr:第一个孩子{border-top:0;}表tr:last-child td {底部边界:0;}表tr td:第一个孩子，表tr th:第一个孩子{左边框:0；}表tr td:最后一个孩子，表tr th:last-child {右边界:0;}ul {填充:0;}.move-right td {font-weight:粗体;背景颜色:浅绿色；padding-left:80px;} 

I want to add padding to the cells of my table when I click button View, but this increases width of the cell. I've seen this question , this and this, however it still increases the size of the cell.

My CSS looks like this:

.move-right div {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  padding-left: 100px;
  font-weight: bold;
  max-width: 100%;
  background-color: lightgreen;
}

And HTML:

<table class="table">
    <thead>
      <tr>
        <th>Foo</th>
        <th>Bar</th>
        <th></th>
      </tr>
    </thead>
    <tbody>        
        <ng-container *ngFor="let item of data">
          <tr [ngClass]="{'move-right': item?.show == 1}">
              <td>
                {{ item.foo }}
              </td>
              <td>{{ item.bar }}</td>
              <td>
                <ul  *ngIf="item.items && item.items.length > 0"
                  (click)="(item.show ? (item.show = 0) : (item.show = 1))"> 
                  {{ item.show ? 'Hide' : 'View' }} 
                </ul>
              </td>
          </tr>
          <ng-container *ngIf="item.show==1">
              <tr *ngFor="let num of item.items" class="move-right">                  
                  <td> <div>{{num}} </div> </td>
                  <td> <div>{{ num }}</div> </td>
                  <td> <div>{{ num }}</div> </td>
              </tr>
          </ng-container>
        </ng-container>
    </tbody>
</table>

This is a reproduced behavior at the stackblitz. Please click View in the table to reproduce such behavior.

What I have now:

After View button is clicked, then the width of columns became wider:

How to avoid of increasing cell width? I just would like to move text slightly to the right side of only td which contains data 'a', 'b', 'c' and '1' and '2'., not in all cells.

It is not desirable to change the columns width on click along with that and I would like those 3 columns to move to the right on 80px?

解决方案

Try using below code, I was able to validate with you angular code:

*{
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
   box-sizing: border-box;
}

table {
  border-collapse: collapse;
  width: 100%;
table-layout:fixed;
}
table td, table th {
  border: 1px solid red;
color:red;

}

table tr:first-child th {
  border-top: 0;
}
table tr:last-child td {
  border-bottom: 0;
}
table tr td:first-child,
table tr th:first-child {
  border-left: 0;
}
table tr td:last-child,
table tr th:last-child {
  border-right: 0;
}

ul{
padding:0;
}  

 .move-right td{     
  font-weight: bold;
  background-color: lightgreen;
  padding-left:80px;
  }

这篇关于尽管具有框大小，但表格单元格仍会增加宽度:边框框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！