Question

我有一个18列7行的表格，我想让td元素占用10列3行，所以这里是我的代码

＆＃13;

<table>
  <thead>
    <tr>
      <td class="groups group1">1</td>
      <td class="groups group2">2</td>
      <td class="groups group3">3</td>
      <td class="groups group4">4</td>
      <td class="groups group5">5</td>
      <td class="groups group6">6</td>
      <td class="groups group7">7</td>
      <td class="groups group8">8</td>
      <td class="groups group9">9</td>
      <td class="groups group10">10</td>
      <td class="groups group11">11</td>
      <td class="groups group12">12</td>
      <td class="groups group13">13</td>
      <td class="groups group14">14</td>
      <td class="groups group15">15</td>
      <td class="groups group16">16</td>
      <td class="groups group17">17</td>
      <td class="groups group18">18</td>
    </tr>
  </thead>
  <tbody>
    <tr class="periods period1">
      <th>1</th>
      <td class="element" id="H"></td>
      <td class="basic_info">
        <span class="info_big"><span class="info_spans">Protons</span></span>
      </td>
      <td class="biginfo" colspan="10" rowspan="3"></td>
      <td class="element" id="He"></td>
    </tr>
    <tr class="periods period2">
      <th>2</th>
      <td class="element" id="Li"></td>
      <td class="element" id="Be"></td>
    </tr>
    <tr class="periods period3">
      <th>3</th>
      <td class="element" id="Na"></td>
      <td class="element" id="Mg"></td>
      <td class="element" id="Al"></td>
      <td class="element" id="Si"></td>
      <tr class="periods period4">
        <th>4</th>
        <td class="element" id="K"></td>
        <td class="element" id="Ca"></td>
      </tr>
      <tr class="periods period5">
        <th>5</th>
      </tr>
      <tr class="periods period6">
        <th>6</th>
      </tr>
      <tr class="periods period7">
        <th>7</th>
      </tr>
  </tbody>
</table>

＆＃13;

如您所见bigInfo的属性colspan等于10且rowspan等于3，但不幸的是，我只获得了细胞6乘70，填充为1而我想要该行采用10列和3行的宽度。

Answer 1

您的代码无效，您有一些丢失的代码。另外，根本没有<table>标记，不知道你的完整代码是如何看的，但我更新了它，它似乎应该如何工作！

<table>
  <thead>
    <tr>
      <td class="groups group1">1</td>
      <td class="groups group2">2</td>
      <td class="groups group3">3</td>
      <td class="groups group4">4</td>
      <td class="groups group5">5</td>
      <td class="groups group6">6</td>
      <td class="groups group7">7</td>
      <td class="groups group8">8</td>
      <td class="groups group9">9</td>
      <td class="groups group10">10</td>
      <td class="groups group11">11</td>
      <td class="groups group12">12</td>
      <td class="groups group13">13</td>
      <td class="groups group14">14</td>
      <td class="groups group15">15</td>
      <td class="groups group16">16</td>
      <td class="groups group17">17</td>
      <td class="groups group18">18</td>
    </tr>
  </thead>
  <tbody>
    <tr class="periods period1">
        <th>1</th>
        <td class="element" id="H"></td>
        <td class="basic_info">
            <span class="info_big"></span>
            <span class="info_spans">Protons</span>
        </td>
        <td class="biginfo" colspan="10" rowspan="3"></td>
        <td class="element" id="He"></td>
    </tr>
    <tr class="periods period2">
        <th>2</th>
        <td class="element" id="Li"></td>
        <td class="element" id="Be"></td>
    </tr>
    <tr class="periods period3">
        <th>3</th>
        <td class="element" id="Na"></td>
        <td class="element" id="Mg"></td>
        <td class="element" id="Al"></td>
        <td class="element" id="Si"></td>
    </tr>
    <tr class="periods period4">
        <th>4</th>
    <td class="element" id="K"></td>
        <td class="element" id="Ca"></td></tr>
    <tr class="periods period5">
        <th>5</th>
    </tr>
    <tr class="periods period6">
        <th>6</th>
    </tr>
    <tr class="periods period7">
        <th>7</th>
    </tr>
  </tbody>
</table>

Answer 2

在HTML中难以可视化具有奇数块跨度的大表。通过column.row标记<td>并确定每个跨度角的col.row坐标。

在演示中评论的详细信息

演示

＆＃13;

table, td {outline:1px solid blue}
td {padding:2px;}

＆＃13;

<!--7x18 | 3x10
Get the 4 corners as row.column coordinates
start at the top left corner then continue in a 
clockwise direction.
1. To determine the left corner columns, count the
   number of columns before the big span begins:
   
Start=3

2. Next add start number to the min and max of colspan:

Start=3 Min=1 
Left Corners=4

Start=3 Max=10
Right Corners=13

3. The row numbers are done the same way but vertically.

Top Left (Start). 1.4
Top Right........ 1.13
Bottom Right..... 3.13
Bottom Left (End) 3.4
-->
<table>
<tr>
<td>1.1</td><td>1.2</td><td>1.3</td>
<td colspan='10' rowspan='3'>1.4---------------------------------------1.13<br>
3.4---------------------------------------3.13</td>
<td>1.14</td><td>1.15</td><td>1.16</td><td>1.17</td><td>1.18</td>
</tr>
<tr>
<td>2.1</td><td>2.2</td><td>2.3</td>
<td>2.x</td><td>2.x</td><td>2.x</td><td>2.x</td><td>2.x</td>
</tr>
<tr>
<td>3.1</td><td>3.2</td><td>3.3</td>
<td>3.x</td><td>3.x</td><td>3.x</td><td>3.x</td><td>3.x</td>
</tr>
<tr>
<td>4.1</td><td>4.2</td><td>4.3</td><td>4.x</td><td>4.x</td><td>4.x</td><td>4.x</td><td>4.x</td><td>4.x</td><td>4.x</td><td>4.x</td><td>4.x</td><td>4.x</td><td>4.x</td><td>4.x</td><td>4.x</td><td>4.x</td><td>4.x</td>
</tr>
<tr>
<td>5.1</td><td>5.2</td><td>5.3</td><td>5.x</td><td>5.x</td><td>5.x</td><td>5.x</td><td>5.x</td><td>5.x</td><td>5.x</td><td>5.x</td><td>5.x</td><td>5.x</td><td>5.x</td><td>5.x</td><td>5.x</td><td>5.x</td><td>5.x</td>
</tr>
<tr>
<td>6.1</td><td>6.2</td><td>6.3</td><td>6.x</td><td>6.x</td><td>6.x</td><td>6.x</td><td>6.x</td><td>6.x</td><td>6.x</td><td>6.x</td><td>6.x</td><td>6.x</td><td>6.x</td><td>6.x</td><td>6.x</td><td>6.x</td><td>6.x</td>
</tr>
<tr>
<td>7.1</td><td>7.2</td><td>7.3</td><td>7.x</td><td>7.x</td><td>7.x</td><td>7.x</td><td>7.x</td><td>7.x</td><td>7.x</td><td>7.x</td><td>7.x</td><td>7.x</td><td>7.x</td><td>7.x</td><td>7.x</td><td>7.x</td><td>7.x</td>
</tr>
</table>

＆＃13;

HTML colspan和rowspan不起作用

2 个答案:

演示