如何使表格中一行的最后一个单元格占据所有剩余宽度

小编典典

如何使表格中一行的最后一个单元格占据所有剩余宽度

css

在下面的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>

阅读 982

2020-05-16

共1个答案

小编典典

您将需要告诉前两列不要换行，并为最后一列提供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中。

对列使用类（nth-child()如果您仅针对现代浏览器，则可以使用css3选择器，例如）：

的HTML：

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

CSS：

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

2020-05-16