Question

使用html colspan时遇到了这个奇怪的问题。我想知道我哪里出错了。

下面是运行它时结果后面的代码片段：

＆＃13;

<html>
<head>
<title>Test</title>
</head>
<body>

	<table width="100%" border="true">
			<tr>
				<td colspan=2>2 cols</td><td colspan=18>18 cols</td>
			</tr>
			<tr><td colspan=2>2 cols</td><td colspan=18>18 cols</td></tr>

		<tr>
			<td colspan=6>6 cols</td>
			<td colspan=2>2 cols</td>
			<td colspan=6>6 cols</td>
			<td colspan=6>6 cols</td>
		</tr>
		<tr>
			<td colspan=6>6 cols</td>
			<td colspan=2>2 cols</td>
			<td colspan=6>6 cols</td>
			<td colspan=6>6 cols</td>
		</tr>
		<tr>
			<td colspan=6>6 cols</td>
			<td colspan=2>2 cols</td>
			<td colspan=6>6 cols</td>
			<td colspan=6>6 cols</td>
		</tr>
		<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td></tr>
	</table>
</body>
</html>

＆＃13;

我基本上想要将表的总宽度分成20个相等的部分，然后能够在行中具有相等部分的特定倍数的列。

我的问题是：

在最后一行，为什么cols 1,2如此宽，相比3,4,5,6？
在第3,4,5行中，当两个实际上都是colspan = 6时，为什么第一列不如第四列宽？

Answer 1

您看到的布局就是浏览器决定根据内容大小布置表格单元格的结果。要获得可预测的结果，可以使用CSS指定一致的单元格大小，例如：

td{width:5%;}

以下是jsFiddle示例。

Answer 2

为了避免计算确切的宽度和可能产生的舍入误差，您可以将table-layout: fixed用于应该具有相同宽度的所有单元格的表：

TABLE {table-layout: fixed; }

Answer 3

您好请尝试以下代码，

但是如果你考虑使用div而不是table这是一个很好的解决方案：HTML colspan in CSS

  <!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
<title>Test</title>'
<style>
td {width:5%;}
</style>

</head>
<body>
	<table width="100%" border="true">
  <tr>
    <td colspan="2">2 cols</td>
    <td colspan="18">18 cols</td>
  </tr>
  <tr>
    <td colspan="2">2 cols</td>
    <td colspan="18">18 cols</td>
  </tr>
  <tr>
    <td colspan="6">6 cols</td>
    <td colspan="2">2 cols</td>
    <td colspan="6">6 cols</td>
    <td colspan="6">6 cols</td>
  </tr>
  <tr>
    <td colspan="6">6 cols</td>
    <td colspan="2">2 cols</td>
    <td colspan="6">6 cols</td>
    <td colspan="6">6 cols</td>
  </tr>
  <tr>
    <td colspan="6">6 cols</td>
    <td colspan="2">2 cols</td>
    <td colspan="6">6 cols</td>
    <td colspan="6">6 cols</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td>8</td>
    <td>9</td>
    <td>10</td>
    <td>11</td>
    <td>12</td>
    <td>13</td>
    <td>14</td>
    <td>15</td>
    <td>16</td>
    <td>17</td>
    <td>18</td>
    <td>19</td>
    <td>20</td>
  </tr>
</table>
</body>

</html>

Answer 4

在最后一行中，为什么cols 1,2与3,4,5,6相比如此宽？

第1,2栏的宽度与第1,2行第1个td相同，之后3,4,5,6从第3,4,5行宽度的6个宽度开始。

因此，您可以使用table-layout:fixed; Css属性来处理此问题。这是https://jsfiddle.net/k8863r74/代码。

HTML colspan问题

4 个答案: