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

http://jsfiddle.net/8D5Rk/1/

我想要的是所有其他单元格的宽度与其中包含 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>

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

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

js小提琴

如果您不希望单元格内容超出其单元格，则可以在 td 上使用overflow-x。

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

js小提琴

或

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

js小提琴

或

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

js小提琴

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

j查询：

//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);

在这里，您的桌子可以工作。

<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>

您的警报不起作用。您的代码是：

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

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

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

它使看起来很微妙，确实如此。我在外面使用了双引号，在里面使用了单引号。

相关内容

最新更新

热门标签：