1

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

4 回答 4

3

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

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

jsFiddle


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

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

jsFiddle


或者

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

jsFiddle


或者

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

jsFiddle

于 2013-11-06T16:05:51.147 回答
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);
于 2013-11-06T15:58:18.523 回答
0

在这里，您的桌子正在工作。

<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>
于 2013-11-06T16:12:55.330 回答
-1

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

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

但是对于您的警报，您使用了两次双引号，这导致警报无法正常工作。相反，这样做：

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

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

于 2013-11-06T16:34:59.903 回答