HTMLテーブルはセルの数を交互に変えるのに役立ちます

StackOverflow https://stackoverflow.com/questions/1619179

  •  06-07-2019
  •  | 
  •  

質問

各行のセルの数を変更したい場合、適切なHTMLは何ですか？私は2つのセルが行1、行2に3、2に3、3に4などがあるようにしたい...レンガの壁に似ています。これまでのところこれはありますが、思い通りにレンダリングされません。このネストしたテーブルを作成できることは知っていますが、1つのテーブルでこれを実行できますか？ 

<table border="1" cellpadding="10">
  <tr>
    <td colspan="1.5"> <span> X </span> </td> 
    <td colspan="1.5"> <span> X </span> </td> 
  </tr>
  <tr>
    <td> <span> X </span> </td> 
    <td> <span> X </span> </td> 
    <td> <span> X </span> </td> 
 </tr>
 <tr>
    <td colspan="1.5"> <span> X </span> </td> 
    <td colspan="1.5"> <span> X </span> </td>
  </tr>
  <tr>
    <td> <span> X </span> </td> 
    <td> <span> X </span> </td> 
    <td> <span> X </span> </td> 
 </tr>
 <tr>
    <td colspan="1.5"> <span> X </span> </td> 
    <td colspan="1.5"> <span> X </span> </td>
  </tr>
  <tr>
    <td> <span> X </span> </td> 
    <td> <span> X </span> </td> 
    <td> <span> X </span> </td> 
 </tr>
</table>
役に立ちましたか？

解決

セルのスパンの幅を小数にすることはできません。代わりに、下限と上限の範囲の行数の最小公分母を見つける必要があります。この例では、2と3、つまり6です。したがって、テーブルの幅は6セルで、偶数行はそれぞれ3に、奇数行は2にまたがっています。

<table width="360">
    <tr>
        <td align="center" width="180" colspan="3">x</td>
        <td align="center" width="180" colspan="3">x</td>
    </tr>
    <tr>
        <td align="center" width="120" colspan="2">x</td>
        <td align="center" width="120" colspan="2">x</td>
        <td align="center" width="120" colspan="2">x</td>
    </tr>
</table>

テーブルの幅は2と3で簡単に割り切れ、幅は各セルで明示的に設定されることに注意してください。

他のヒント

それを行う1つの方法は、CSSを使用することです。必要な大きさのテーブル（たとえば4x4）を設定し、必要に応じて各セルにスタイルを適用します。レンガと空の2つのスタイルがあり、1つは「レンガ」を表します。および他の空のスペースを示します。

だから、次のようなことができます：

<html>
<head>
<style type="text/css">
  td { border-style:none; width:30px; }
  td.brick { border-style:solid; border-color:black; border-width:1px; }
</style>
</head>
<body>
<table>
<tr><td class="brick">&nbsp;</td><td></td><td></td><td></td></tr>
<tr><td class="brick">&nbsp;</td><td class="brick">&nbsp;</td><td></td><td></td></tr>
<tr><td class="brick">&nbsp;</td><td class="brick">&nbsp;</td><td class="brick">&nbsp;</td><td></td></tr>
<tr><td class="brick">&nbsp;</td><td class="brick">&nbsp;</td><td class="brick">&nbsp;</td><td class="brick">&nbsp;</td></tr>
</table>
</body>
</html>

<table>
<tr>
 <td colspan="2">X</td>
 <td colspan="2">X</td>
 <td colspan="2">X</td>
 <td>Y</td>
</tr>
<tr>
 <td>Y</td>
 <td colspan="2">X</td>
 <td colspan="2">X</td>
 <td colspan="2">X</td>
</tr>

colspansは整数値でなければならず、小数部は許可されていません。 3セル行に幅0、パディング0、マージン0のダミーセルを追加してみてください。 

<tr>
    <td colspan="2"> <span> X </span> </td> 
    <td colspan="2"> <span> X </span> </td> 
  </tr>
  <tr>
    <td> <span> X </span> </td> 
    <td> <span> X </span> </td> 
    <td> <span> X </span> </td> 
    <td><!-- dummy !--></td> 
</tr>
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top