Question

请查看https://jsfiddle.net/wYA9K/55/

<table>
<thead>
    <th colspan="1" style="width: 10%">TH1</th>
    <th colspan="1" style="width: 60%">TH2</th>
    <th colspan="1" style="width: 30%">&nbsp;</th>
    <th>&nbsp;</th>  <-- what should i do??
</thead>
<tr>
    <td colspan="1" style="width: 10%">a</td>
    <td colspan="1" style="width: 60%">b</td>
    <td colspan="1" style="width: 30%">c</td>
    <td>UNDERNEATH SPANNING WHOLE ROW</td> <-- what should i do??
</tr>

我正在努力使最后一个td扩展整行。反正有可能吗？

Answer 1

如果您希望显示每行的最后一列，并且您愿意在所有其他列上包含显式样式，则可以浮动它们：

<table>
  <thead>
    <tr>
      <th colspan="1" style="width: 10%">TH1</th>
      <th colspan="1" style="width: 60%">TH2</th>
      <th colspan="1" style="width: 30%">&nbsp;</th>
      <th>&nbsp;</th>
    </tr>
  </thead>
  <tr>
    <td colspan="1" style="width: 10%">a</td>
    <td colspan="1" style="width: 60%">b</td>
    <td colspan="1" style="width: 30%">c</td>
    <td>UNDERNEATH SPANNING WHOLE ROW</td>
  </tr>
  <tr>
    <td colspan="1" style="width: 10%">a</td>
    <td colspan="1" style="width: 60%">b</td>
    <td colspan="1" style="width: 30%">c</td>
    <td>UNDERNEATH SPANNING WHOLE ROW</td>
  </tr>
</table>

import jdk.internal.org.xml.sax.Attributes;
import jdk.internal.org.xml.sax.SAXException;
import jdk.internal.org.xml.sax.helpers.DefaultHandler;

Answer 2

使用colspan="3"创建一个新行。此外，colspan="1"是默认值，因此您不需要使用它来混淆标记。

<table>
    <thead>
        <tr>
            <th style="width: 10%">TH1</th>
            <th style="width: 60%">TH2</th>
            <th style="width: 30%">&nbsp;</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td style="width: 10%">a</td>
            <td style="width: 60%">b</td>
            <td style="width: 30%">c</td>
        </tr>
        <tr>
            <td colspan="3">UNDERNEATH SPANNING WHOLE ROW</td>
        </tr>
    </tbody>
</table>

将最后一个td作为行

2 个答案: