人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

HTMLとCSSにて添付した画像のようなテーブルを組むにはどうしたらよいのでしょうか?
一番下の行の左側を空白かつ枠線なしにする方法が解らず困っています。

1287052401
●拡大する

●質問者: ysog
●カテゴリ:ウェブ制作
✍キーワード:CSS HTML 画像
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● a-kuma3
●35ポイント

背景とかは省略しているけど、こんな感じ?

<style>
.xxxx {
border-collapse: collapse;
}
.xxxx TD {
border: 1px solid black;
}
</style>

<table class="xxxx">
<tr>
<td>見出し1</td>
<td>1234</td>
<td>見出し3</td>
<td>1234</td>
</tr>
<tr>
<td>見出し1</td>
<td>1234</td>
<td style="border: none;"></td>
<td style="border: none;"></td>
</tr>
<tr>
<td style="border: none;"></td>
<td style="border: none;"></td>
<td>見出し3</td>
<td>1234</td>
</tr>
</table>
◎質問者からの返答

できました!ありがとうございます。


2 ● Galapagos
●35ポイント

以下のようにすればいいでしょう。

<html>
<head>
<style type="text/css">
#table {
 border-width: 0px 0px 0px 0px;
}
#td1 {
 width: 100px;
 background-color: orange;
 border-style: solid;
 border-color: black;
 border-width: 1px 1px 1px 1px;
}
#td2 {
 width: 100px;
 text-align: right;
 border-style: solid;
 border-color: black;
 border-width: 1px 1px 1px 1px;
}
#td3 {
 width: 100px;
 border-width: 0px 0px 0px 0px;
}

</style>
</head>
<body>
<table>
<tr>
<td id="td1">見出し1</td><td id="td2">1234</td>
<td id="td1">見出し3</td><td id="td2">1234</td>
</tr>
<tr>
<td id="td1">見出し2</td><td id="td2">1234</td>
<td id="td3"></td><td id="td3"></td>
</tr>
<tr>
<td id="td3"></td><td id="td3"></td>
<td id="td1">見出し4</td><td id="td2">1234</td>
</tr>
</table>
</body>
</html>
◎質問者からの返答

できました!ありがとうございます。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ