在可滚动的 tbody 中对齐单元格文本

Question

我正在尝试右对齐下表最后一列中的文本：

<table class="dataview">
  <thead>
    <tr>
      <th>Customer Name</th>
      <th>Email Address</th>
      <th><span class="right">Balance</span></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Customer 1</td>
      <td>testcust1@gmail.com</td>
      <td class="right">$3000.00</td>
    </tr>    
    <tr>
      <td>Customer 2</td>
      <td>testcust2@gmail.com</td>
      <td class="right">$4000.00</td>
    </tr>    
  </tbody>
</table>

使用以下 CSS：

.dataview{
  width: 830px;
  margin: 0 auto;
  table-layout: fixed;
  border-collapse: collapse; 
  border: 1px solid black;
}
.dataview th, .dataview td{
  padding: 5px;
  text-align: left;  
}
.dataview th:nth-child(1), .dataview td:nth-child(1){min-width: 350px;}
.dataview th:nth-child(2), .dataview td:nth-child(2){min-width: 350px;}
.dataview th:nth-child(3), .dataview td:nth-child(3){min-width: 100px;}

.dataview thead{
  background-color: cornflowerblue;
  color: white;  
}
.dataview tr{
  border-bottom: 1px solid black
}
.dataview tbody tr:nth-last-child(1){
  border-bottom: none;
}
.dataview thead tr{
  display: block;
  position: relative;  
}
.dataview tbody{
  display: block;
  overflow-y: auto;
  overflow-x: hidden;
  width: 100%;
  height: 50px;  
}
.dataview td.right{
  text-align:right;
  background-color: green;
}
.dataview tbody tr:nth-child(even){
  background-color: powderblue;
}

最后一列中的文本确实右对齐；但是，如果存在滚动条，则部分文本位于滚动条下方。我尝试了填充、边距、围绕跨度或 div 中的文本，但我无法从滚动条下方获取文本。如何解决此问题以使文本正确对齐？ CodePen Example

Answer 1

margin 和 padding 在您的情况下不起作用，因为表格的固定宽度为 830 像素。这些属性将被隐藏。

如果表格的宽度不需要固定，可以参考#table-2的例子。

body{
  background-color: tomato;
}
.dataview{
  width: 830px;
  margin: 0 auto;
  table-layout: fixed;
  border-collapse: collapse; 
  border: 1px solid black;
}

.dataview th, .dataview td{
  padding: 5px;
  text-align: left;  
}
.dataview th:nth-child(1), .dataview td:nth-child(1){min-width: 350px;}
.dataview th:nth-child(2), .dataview td:nth-child(2){min-width: 350px;}
.dataview th:nth-child(3), .dataview td:nth-child(3){min-width: 100px;}

.dataview thead{
  background-color: cornflowerblue;
  color: white;  
}
.dataview tr{
  border-bottom: 1px solid black
}
.dataview tbody tr:nth-last-child(1){
  border-bottom: none;
}
.dataview thead tr{
  display: block;
  position: relative;  
}
.dataview tbody{
  display: block;
  overflow-y: auto;
  overflow-x: hidden;
  width: 100%;
  height:40px;  
}
.dataview th.right, .dataview td.right{
  text-align:right;    
}
.dataview tbody tr:nth-child(even){
  background-color: powderblue;
}

#table-2 {
  width: auto;
  min-width: 830px;
}
#table-2.dataview th:nth-child(3),  #table-2.dataview td:nth-child(3){padding-right: 20px}


#table-3 tbody {
  height: auto;
}

#table-3 {
  width: auto;
  min-width: 830px;
}
#table-3.dataview th:nth-child(3),  #table-3.dataview td:nth-child(3){
  //padding-right: 20px
}

<table class="dataview">
  <thead>
    <tr>
      <th>Customer Name</th>
      <th>Email Address</th>      
      <th class="right">Balance</th>      
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Customer 1</td>
      <td>testcust1@gmail.com</td>
      <td class="right">$3000.00</td>      
    </tr>    
    <tr>
      <td>Customer 2</td>
      <td>testcust2@gmail.com</td>
      <td class="right">$4000.00</td>      
    </tr>    
  </tbody>
</table>

<br>


<table class="dataview" id="table-2">
  <thead>
    <tr>
      <th>Customer Name</th>
      <th>Email Address</th>      
      <th class="right">Balance</th>      
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Customer 1</td>
      <td>testcust1@gmail.com</td>
      <td class="right">$3000.00</td>      
    </tr>    
    <tr>
      <td>Customer 2</td>
      <td>testcust2@gmail.com</td>
      <td class="right">$4000.00</td>      
    </tr>    
  </tbody>
</table>

<table class="dataview" id="table-3">
  <thead>
    <tr>
      <th>Customer Name</th>
      <th>Email Address</th>      
      <th class="right">Balance</th>      
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Customer 1</td>
      <td>testcust1@gmail.com</td>
      <td class="right">$3000.00</td>      
    </tr>    
    <tr>
      <td>Customer 2</td>
      <td>testcust2@gmail.com</td>
      <td class="right">$4000.00</td>      
    </tr>    
  </tbody>
</table>

Answer 2

将第三列样式上的 min-width:100px 更改为 width:100%。

.dataview th:nth-child(3), .dataview td:nth-child(3){width:100%;}

然后它会根据需要在滚动条之外折叠和展开。

.dataview{
  width: 830px;
  margin: 0 auto;
  table-layout: fixed;
  border-collapse: collapse; 
  border: 1px solid black;
}
.dataview th, .dataview td{
  padding: 5px;
  text-align: left;  
}
.dataview th:nth-child(1), .dataview td:nth-child(1){min-width: 350px;}
.dataview th:nth-child(2), .dataview td:nth-child(2){min-width: 350px;}
.dataview th:nth-child(3), .dataview td:nth-child(3){width:100%;}

.dataview thead{
  background-color: cornflowerblue;
  color: white;  
}
.dataview tr{
  border-bottom: 1px solid black
}
.dataview tbody tr:nth-last-child(1){
  border-bottom: none;
}
.dataview thead tr{
  display: block;
  position: relative;  
}
.dataview tbody{
  display: block;
  overflow-y: auto;
  overflow-x: hidden;
  width: 100%;
  height: 50px;  
}
.dataview td.right{
  text-align:right;
  background-color: green;
}
.dataview tbody tr:nth-child(even){
  background-color: powderblue;
}

<table class="dataview">
  <thead>
    <tr>
      <th>Customer Name</th>
      <th>Email Address</th>
      <th><span class="right">Balance</span></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Customer 1</td>
      <td>testcust1@gmail.com</td>
      <td class="right">$3000.00</td>
    </tr>    
    <tr>
      <td>Customer 2</td>
      <td>testcust2@gmail.com</td>
      <td class="right">$4000.00</td>
    </tr>    
  </tbody>
</table>

Answer 3

尝试在类中添加 !important 属性：

.dataview td.right{
  text-align:right !important;
  background-color: green;
}