如何使表格中某一行的最后一个单元格占据所有剩余宽度 [英] How to make last cell of a row in a table occupy all remaining width

问题描述

在下面的HTML片段中，如何使包含LAST的列的宽度占据行的其余部分，并且包含COLUMN ONE和COLUMN TWO的列的宽度足够宽

谢谢

  table {border-collapse：collapse;} table td {border：1px solid black;}   < table> < tr> < td> < table width =100％> < tr> < td> < span> COLUMN< / span> < span> ONE< / span> < / td> < td> COLUMN TWO< / td> < td> LAST< / td> < / tr> < / table> < / td> < / tr> < tr> < td> ANOTHER ROW< / td> < / tr>< / table>  

解决方案

您需要告诉前两列不包装，最后一列的宽度为99％：

 < table width =100％> 
< tr> 
< td style =white-space：nowrap;> 
< span> 
 COLUMN 
< / span> 
< span> 
 ONE 
< / span> 
< / td> 
< td style =white-space：nowrap;> 
 COLUMN TWO 
< / td> 
< td width =99％> 
 LAST 
< / td> 
< / tr> 
< / table> 
  

编辑：您应该将所有样式/ ..）css。

使用类的列（可以使用css3选择器，例如 nth-child（）如果您只定位现代浏览器）：

html：

  < tr> 
< td class =col1> 
 // etc 
  

css：

  .col1，.col2 {
 white-space：nowrap; 
} 
 .col3 {
 width：99％; 
} 
  

In the below HTML fragment, how can I make the width of a column that contains 'LAST' occupy the remainder of the row, and widths of columns that contain 'COLUMN ONE' and 'COLUMN TWO' be just wide enough to contain their content, and not larger.

Thank you

table {
  border-collapse: collapse;
}
table td {
  border: 1px solid black;
}

<table>
  <tr>
    <td>
      <table width="100%">
        <tr>
          <td>
            <span>
             COLUMN
           </span>
            <span>
             ONE
           </span>
          </td>
          <td>
            COLUMN TWO
          </td>
          <td>
            LAST
          </td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td>
      ANOTHER ROW
    </td>
  </tr>

</table>

解决方案

You will need to tell the first two columns not to wrap and give the last column a width of 99%:

<table width="100%">
       <tr>
         <td style="white-space: nowrap;">
           <span>
             COLUMN
           </span>
           <span>
             ONE
           </span>
         </td>
         <td style="white-space: nowrap;">
            COLUMN TWO
         </td>
         <td width="99%">
           LAST
         </td>
       </tr>
     </table>

Edit: You should put that all styles / presentation in (external...) css.

Using classes for the columns (you could use css3 selectors like nth-child() instead if you only target modern browsers):

html:

<tr>
  <td class="col1">
  // etc

css:

.col1, .col2 {
  white-space: nowrap;
}
.col3 {
  width: 99%;
}

这篇关于如何使表格中某一行的最后一个单元格占据所有剩余宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！