Question

我想要的是所有其他单元格的宽度与其中的VSF05相同（在这种情况下，是最大的单元格）。奇怪的是，我无法在网上找到解决方案。

另外，我想让第二个空表具有与上表中最大的一个相同的单元格宽度。

HTML

<table border="1" style="margin-left:20px;font-size:80%;">
<tbody>
<tr>
<th></th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
<th>7</th>
<th>8</th>
<th>9</th>
<th>10</th>
<th>11</th>
<th>12</th>
<th>13</th>
<th>14</th>
<th>15</th>
<th>16</th>
</tr>
<tr>
<th>1 S</th>
<td style="background-color:#E6E6E6">
<td style="background-color:#E6E6E6">
<td style="background-color:#E6E6E6">
<td style="background-color:#E6E6E6">
<td style="background-color:#E6E6E6">
<td style="background-color:#E6E6E6">
<td style="background-color:#E6E6E6">
<td style="background-color:#E6E6E6">
<td style="background-color:#E6E6E6">
<td style="background-color:#E6E6E6">
<td style="background-color:#E6E6E6">
<td style="background-color:#E6E6E6">
<td style="background-color:#E6E6E6">
<td style="background-color:#E6E6E6">
<td>
<a onclick="alert("VSF05 ")" href="#">VSF05 </a>
</td>
<td style="background-color:#E6E6E6">
</tr>
</tbody>
</table>


    <br>
<table border="1" style="margin-left:20px;font-size:70%;">
<tbody>
<tr>
<th></th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
<th>7</th>
<th>8</th>
<th>9</th>
<th>10</th>
<th>11</th>
<th>12</th>
<th>13</th>
<th>14</th>
<th>15</th>
<th>16</th>
</tr>
<tr>
<th>2 V</th>
<td style="background-color:#E6E6E6">
<td style="background-color:#E6E6E6">
<td style="background-color:#E6E6E6">
<td style="background-color:#E6E6E6">
<td style="background-color:#E6E6E6">
<td style="background-color:#E6E6E6">
<td style="background-color:#E6E6E6">
<td style="background-color:#E6E6E6">
<td style="background-color:#E6E6E6">
<td style="background-color:#E6E6E6">
<td style="background-color:#E6E6E6">
<td style="background-color:#E6E6E6">
<td style="background-color:#E6E6E6">
<td style="background-color:#E6E6E6">
<td style="background-color:#E6E6E6">
<td style="background-color:#E6E6E6">
</tr>
</tbody>
</table>

Answer 1

我不确定你的表的宽度要求是什么，但你可以使用CSS：

table 
{
    width: 100%;
    table-layout: fixed;
}

jsFiddle

如果您不希望扩展的单元格内容通过其单元格，则可以在td上使用overflow-x。

table td 
{
    overflow-x: hidden; // hides content if the cell isn't wide enough
}

jsFiddle

OR

table td 
{
    overflow-x: auto; // only shows scrollbar when necessary
}

jsFiddle

OR

table td 
{
    overflow-x: scroll; // all cells show scrollbars, not ideal
}

jsFiddle

Answer 2

我不认为CSS可以做到这一点。

<强> jQuery的：

//max is 0 (not yet known)
    var max = 0;
//find the max.  searching 1 row is enough --@Alexis Wilke
    $('tr').first().find('td').each(function(k, v) {
        var currentWidth = parseFloat($(this).css('width'));
//if currentWidth is bigger than the latest found max, update the max
        if (currentWidth > max)
        {
            max = currentWidth;
        }

    });
//set width to max
    $('td').css('width', max);

Answer 3

这是你的桌子工作。

<html>
<head>
<style>
table { table-layout: fixed; }
td { width: (100/16)%; }
</style>
</head>
<body>
<table width="100%" border="1">
<tbody>
<tr>
<th></th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
<th>7</th>
<th>8</th>
<th>9</th>
<th>10</th>
<th>11</th>
<th>12</th>
<th>13</th>
<th>14</th>
<th>15</th>
<th>16</th>
</tr>
<tr>
<th>1 S</th>
<td style="background-color:#E6E6E6">
<td style="background-color:#E6E6E6">
<td style="background-color:#E6E6E6">
<td style="background-color:#E6E6E6">
<td style="background-color:#E6E6E6">
<td style="background-color:#E6E6E6">
<td style="background-color:#E6E6E6">
<td style="background-color:#E6E6E6">
<td style="background-color:#E6E6E6">
<td style="background-color:#E6E6E6">
<td style="background-color:#E6E6E6">
<td style="background-color:#E6E6E6">
<td style="background-color:#E6E6E6">
<td style="background-color:#E6E6E6">
<td><a onclick="alert("VSF05 ")" href="#">VSF05 </a></td>
<td style="background-color:#E6E6E6">
</tr>
</tbody>
</table>
</body>
</html>

Answer 4

您的提醒无效。您的代码是：

<a onclick="alert("VSF05")" href="#">VSF05 </a>

但是对于你的警报，你使用双引号两次，这导致警报不能完成它的工作。相反，这样做：

<a onclick"alert('VSF05')" href="#">VSF05</a>

它看起来很微妙，它是。我在外面使用双引号，在内部使用单引号。

如何为HTML表格单元格提供与内容最大的单元格相同的宽度？

4 个答案: