1行目 - 1セル目、2行目 - 2セル目、3行目 - 3セル目

-6

1行目、2行目、2行目、3行目、各行のセルは、と同じサイズ？可能ですか？1行目 - 1セル目、2行目 - 2セル目、3行目 - 3セル目

2016-10-31 Noam B.

JSFiddle例である何かを試してみてください。あなたのためにこれを行うウェブ上には、多くの無料のHTMLエディタアプリがあります。 – j08691

特に、これはテーブルのようにしたいのですが、これはコンテンツやレイアウトの目的ですか？そのレイアウトの目的の場合は、私はテーブルを使用しないで、むしろグリッドシステムとのdivを使用することをお勧めします。ブーツラップまたは960グリッドを考えてください –

が1つのよりシンプルなソリューションです

CSS：

table { 
    width: 100%; 
    border: none; 

} 
.td_b { 
    border: 1px solid black; 
}

HTML：ここ

<table> 
    <tr> 
    <td> 
    <table> 
    <tr> 
     <td class="td_b">1st</td> 
    </tr> 
    </table> 
    </td> 
    </tr> 
    <tr> 
    <td> 
    <table> 
    <tr> 
     <td class="td_b">1st</td> 
     <td class="td_b">2nd</td> 
    </tr> 
    </table> 
    </td> 
    </tr> 
    <tr> 
    <td> 
    <table> 
    <tr> 
     <td class="td_b">1st</td> 
     <td class="td_b">2nd</td> 
     <td class="td_b">3rd</td> 
    </tr> 
    </table> 
    </td> 
    </tr> 
</table>

はその

さらに別のJSFiddleのリンクです。このようなソルションは次のとおりです。

CSS：

table { 
    width: 100%; 
    border: none; 
} 
td { 
    border: 1px solid black; 
} 
.td_1 { 
    width: 100%; 
} 
.td_2 { 
    width: 50%; 
} 
.td_3 { 
    width: 33%; 
}

HTML：ここ

<table> 
    <tr> 
    <td class="td_1" colspan="6">1st</td> 
    </tr> 
    <tr> 
    <td class="td_2" colspan="3">1st</td> 
    <td class="td_2" colspan="3">2nd</td> 
    </tr> 
    <tr> 
    <td class="td_3" colspan="2">1st</td> 
    <td class="td_3" colspan="2">2nd</td> 
    <td class="td_3" colspan="2">3rd</td> 
    </tr> 
</table>

は

出典

2016-10-31 14:38:08 Banzay

oldskoolのトリックは、3番目の行にテーブルをネストすることです。ここで

<!DOCTYPE html> 
<html> 
<head> 
<style> 
.two-column { 
width: 50%; 
} 
.three-column { 
    width: 33.3%; 
} 
</style> 

</head> 

<body> 
<table class="my-table"> 
    <tr> 
    <td colspan="3">Row 1 column 1</td> 
    </tr> 
    <tr> 
    <td class="two-column">Row 2 column 1</td> 
    <td class="two-column" colspan="2">Row 2 column 2</td> 
    </tr> 
    <tr> 
    <td colspan="3"> 
     <table class="my-nested-table"> 
      <tr> 
       <td class="three-column">Row 3 column 1</td> 
       <td class="three-column">Row 3 column 2</td> 
       <td class="three-column">Row 3 column 3</td> 
      </tr> 
     </table> 
    </td> 
    </tr> 
</table> 
</body> 

</html>

出典

2016-10-31 13:59:44

ありがとう、なぜ私は親指を落としましたか？それは良い挑戦だと思われますね。 –

親指を落とした理由がわかりません。私はそれをダウン投票していませんでしたか？あなたが私の答えに満足しているなら、正しいと投票してください.-) –

私はそれを試しましたが、うまくいきません:-( –

1行目 - 1セル目、2行目 - 2セル目、3行目 - 3セル目

答えて

関連する問題