htmlで幅100%の表を作成したとき、すべてのセル(tds)を等分する場合、各セルに幅%を入力する必要があるのでしょうか?また、そうしなければならないのでしょうか?
E.g.です。
<table cellpadding="0" cellspacing="0" width="100%" border="0">
<tr>
<td width="25%"></td>
<td width="25%"></td>
<td width="25%"></td>
<td width="25%"></td>
</tr>
</table>
あるいは、各TDSを均等に分割したい場合は、各TDSに幅を書かないという手順もありますね。
<table cellpadding="0" cellspacing="0" width="100%" border="0">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
どちらのマナーでも通用することは知っていますが、ただ、quot;legit"な方法を知りたいだけなんです。
テーブルのプロパティ table-layout:fixed;
を使用して、等間隔のセルを取得します。 列に幅セットがある場合、コンテンツが何であれ、それは指定された幅になります。 幅を設定していない列は、残っている部屋をそれらの間で分割します。
<table style='table-layout:fixed;'>
<tbody>
<tr>
<td>gobble de gook</td>
<td>mibs</td>
</tr>
</tbody>
</table>
捨てるだけで、 < colgroup>< col span = '#' style = 'width:#%; '/>< / colgroup>
を使用することもできます。テーブルごとのスタイルの繰り返し、またはテーブルにスタイルシートで使用するIDを与えます。 最初の行の幅を設定するだけで十分だと思います。
各セルの幅 % を入力する必要があります。でも待ってください、もっといい方法があるんです、それはCSSと呼ばれるものです。
<style>
.equalDivide tr td { width:25%; }
</style>
<table class="equalDivide" cellpadding="0" cellspacing="0" width="100%" border="0">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
私ならCSSでやりますが、あなたはCSSを使わずにテーブルでやりたいのだと思いますので、試してみてください。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<body leftmargin=0 rightmargin=0>
<table cellpadding="0" cellspacing="0" width="100%" border="1" height="350px">
<tr>
<td width="25%"> </td>
<td width="25%"> </td>
<td width="25%"> </td>
<td width="25%"> </td>
</tr>
</table>
</body>
</html>
これは間違いなく質問に対する最もクリーンな答えです:https://stackoverflow.com/a/14025331/1008519。
table-layout:fixed
と組み合わせて、 < colgroup>
を列を好きなように機能させるための優れたツールを見つけることがよくあります(こちらのコーデペンを参照)。
<。!-スニペットを開始:js hide:false -->。
table {
/* When set to 'fixed', all columns that do not have a width applied will get the remaining space divided between them equally */
table-layout: fixed;
}
.fixed-width {
width: 100px;
}
.col-12 {
width: 100%;
}
.col-11 {
width: 91.666666667%;
}
.col-10 {
width: 83.333333333%;
}
.col-9 {
width: 75%;
}
.col-8 {
width: 66.666666667%;
}
.col-7 {
width: 58.333333333%;
}
.col-6 {
width: 50%;
}
.col-5 {
width: 41.666666667%;
}
.col-4 {
width: 33.333333333%;
}
.col-3 {
width: 25%;
}
.col-2 {
width: 16.666666667%;
}
.col-1 {
width: 8.3333333333%;
}
/* Stylistic improvements from here */
.align-left {
text-align: left;
}
.align-right {
text-align: right;
}
table {
width: 100%;
}
table > tbody > tr > td,
table > thead > tr > th {
padding: 8px;
border: 1px solid gray;
}
<table cellpadding="0" cellspacing="0" border="0">
<colgroup>
<col /> <!-- take up rest of the space -->
<col class="fixed-width" /> <!-- fixed width -->
<col class="col-3" /> <!-- percentage width -->
<col /> <!-- take up rest of the space -->
</colgroup>
<thead>
<tr>
<th class="align-left">Title</th>
<th class="align-right">Count</th>
<th class="align-left">Name</th>
<th class="align-left">Single</th>
</tr>
</thead>
<tbody>
<tr>
<td class="align-left">This is a very looooooooooong title that may break into multiple lines</td>
<td class="align-right">19</td>
<td class="align-left">Lisa McArthur</td>
<td class="align-left">No</td>
</tr>
<tr>
<td class="align-left">This is a shorter title</td>
<td class="align-right">2</td>
<td class="align-left">John Oliver Nielson McAllister</td>
<td class="align-left">Yes</td>
</tr>
</tbody>
</table>
<table cellpadding="0" cellspacing="0" border="0">
<!-- define everything with percentage width -->
<colgroup>
<col class="col-6" />
<col class="col-1" />
<col class="col-4" />
<col class="col-1" />
</colgroup>
<thead>
<tr>
<th class="align-left">Title</th>
<th class="align-right">Count</th>
<th class="align-left">Name</th>
<th class="align-left">Single</th>
</tr>
</thead>
<tbody>
<tr>
<td class="align-left">This is a very looooooooooong title that may break into multiple lines</td>
<td class="align-right">19</td>
<td class="align-left">Lisa McArthur</td>
<td class="align-left">No</td>
</tr>
<tr>
<td class="align-left">This is a shorter title</td>
<td class="align-right">2</td>
<td class="align-left">John Oliver Nielson McAllister</td>
<td class="align-left">Yes</td>
</tr>
</tbody>
</table>
<。!-終了スニペット-->。