1

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

私が望むのは、他のすべてのセルが VSF05 を含むセル (この場合は最大のセル) と同じ幅であることです。奇妙なことに、私はこれに対する解決策をオンラインで見つけることができませんでした。

また、上のテーブルの最大のものと同じセル幅を持つ 2 番目の空のテーブルを指定したいと思います。

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

jsフィドル


セルのコンテンツがセルを超えて拡張されたくない場合はoverflow-x、td で使用できます。

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フィドル

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

ただし、アラートでは二重引用符を 2 回使用しているため、アラートが機能しません。代わりに、これを行います：

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

それは微妙に見えます。外側に二重引用符、内側に一重引用符を使用しました。

于 2013-11-06T16:34:59.903 に答える