Question

当其他行有许多<td>元素时，我想将<td>元素放在一行中。但第一行的<td>元素始终位于第一列位置，并且它不会移动到中心位置。

这是我的代码示例：

＆＃13;

<table border="1">
  <tr>
    <td>Problem</td>
  </tr>
  <tr>
    <td>65</td>
    <td rowspan="3" width="100px">66</td>
    <td>67</td>
  </tr>
  <tr>
    <td>75</td>
    <td>77</td>
  </tr>
  <tr>
    <td>85</td>
    <td>87</td>
  </tr>
  <tr>
    <td>85</td>
    <td>86</td>
    <td>87</td>
  </tr>
</table>

＆＃13;

这是结果，我希望一个元素在没有其他元素的情况下进入中心，并且它应该采用相同的第一列元素的宽度和高度。图片在这里 - Result i get

Answer 1

如果我正确解释您的问题，您不希望<td>元素跨越整行。相反，你希望它被定位在＆＃34;中心＆＃34;列。

如果您事先知道尺寸，则可以在它之前创建空的<td>并隐藏它们。

＆＃13;

table { empty-cells: hide; }

＆＃13;

<table border="1">
  <tr>
    <td></td> <!-- Empty TD for positioning -->
    <td>Problem</td>
  </tr>
  <tr>
    <td>65</td>
    <td rowspan="3" width="100px">66</td>
    <td>67</td>
  </tr>
  <tr>
    <td>75</td>
    <td>77</td>
  </tr>
  <tr>
    <td>85</td>
    <td>87</td>
  </tr>
  <tr>
    <td>85</td>
    <td>86</td>
    <td>87</td>
  </tr>
</table>

＆＃13;

Answer 2

＆＃13;

<table border="1"> 
  <tr>
    <td style="border:5px"></td>
    <td>56</td>
    <td style="border:5px"></td>
  </tr>
  <tr>
    <td>65</td>
    <td>66</td>
    <td>67</td>
  </tr>
  <tr>
    <td>75</td>
    <td>66</td>
    <td>77</td>
  </tr>
  <tr>
    <td>85</td>
    <td>66</td>
    <td>87</td>
  </tr>
</table>

＆＃13;

如果您想要列，则可以删除该样式部分这就是结果：

Answer 3

似乎你想要一个标题而不是一个单元格：

＆＃13;

td {
  border: 1px solid;
}

＆＃13;

<table>
  <caption>Problem</caption>
  <tr>
    <td>65</td>
    <td rowspan="3" style="width: 100px">66</td>
    <td>67</td>
  </tr>
  <tr>
    <td>75</td>
    <td>77</td>
  </tr>
  <tr>
    <td>85</td>
    <td>87</td>
  </tr>
  <tr>
    <td>85</td>
    <td>86</td>
    <td>87</td>
  </tr>
</table>

＆＃13;

Answer 4

＆＃13;

    <table border="1">
        <tr align="center">
            <td colspan="3" align="center">Problem</td>
        </tr>
        <tr>
            <td>65</td>
            <td rowspan="3" width="100px" align="center">66</td>
            <td>67</td>
        </tr>
        <tr>
            <td>75</td>
            <td>77</td>
        </tr>
        <tr>
            <td>85</td>
            <td>87</td>
        </tr>
        <tr>
            <td>85</td>
            <td align="center">86</td>
            <td>87</td>
        </tr>
    </table>

＆＃13;

Answer 5

表中的列数由表的任何给定行中的最大列数定义。由于您的表使用3列，因此只有一个td单元格的行不适合。

要解决此问题，colspan属性就是您想要的。

但是，由于您希望将单元格保持在同一列中的其他大小，因此您将使用空td元素来执行此操作。示例如下：

＆＃13;

table,
td {
  border: 1px solid black;
}

＆＃13;

<table>
  <tr>
    <td></td>
    <td>1 column</td>
    <td></td>
  </tr>
  <tr>
    <td>1 column</td>
    <td>1 column</td>
    <td>1 column</td>
  </tr>
</table>

＆＃13;

当一行包含一个元素时，其他行有很多

5 个答案: