HTML の表・テーブルの列の幅を設定する方法についての考察

「あんまり自信はないけれども、有用だよな」と思っている内容については記事のタイトルの末尾に「考察」とつけてごまかしておりますが、今回の内容もそんな感じのものです。

新規投稿を追加_‹_comemo_—_WordPress

続きを読む

CSS で作成された表・テーブルに画像を貼り付けてもレイアウトが歪まないようにするには「table-layout:fixed」を追加すればいいようだ

最近まで、表・テーブルに画像を貼り付けたりしたときにテーブルの幅のバランスが崩れたりして困っていたのですが、「table-layout: fixed」を追加すればいいらしいことがわかったので、その覚え書きです。

table タグや display: table を指定している要素に「table-layout: fixed;」を追加すると、以下のような感じで、表の中に大きな画像を挿入しても、指定した幅内に収まってくれるようです。

いや、これだけの話なんですけれども、個人的にはかなりすっきりしました。

参考

各構成要素のデザイン – 「構成要素:表(テーブル)、デザイン:comemo ベーシック、テーマ:Twenty Twelve」編 –

表(テーブル) | ブログ「comemo」のデザインシリーズ「comemo ベーシック」の各構成要素の保管庫

記事中の記述
<table width="387" border="1" cellspacing="0" cellpadding="2">
<tbody>
<tr>
<th valign="top" width="148">項目</th>
<th valign="top" width="237">内容</th>
</tr>
<tr>
<td valign="top" width="148">項目1</td>
<td valign="top" width="237">てすてす</td>
</tr>
<tr>
<td valign="top" width="148">項目2</td>
<td valign="top" width="237">てすてす</td>
</tr>
<tr>
<td valign="top" width="148">項目3</td>
<td valign="top" width="237">てすてす</td>
</tr>
<tr>
<td valign="top" width="148">項目4</td>
<td valign="top" width="237">てすてす</td>
</tr>
</tbody>
</table>
CSS スタイルシートエディターに追加する CSS
   /* comemo table basic -twenty twelve 20131218-  */
.entry-content table {
    display: table;
    border-radius: 5px;
    border: 5px solid #cccccc;
}

.entry-content tbody {
    border: 0;
}

.entry-content table tr th {
    background-color: #cccccc;
    color: #ffffff;
    padding: 7px 15px 10px;
    letter-spacing: 15px;
    font-weight: bold;
    text-shadow: -1px -1px 1px #999;
    font-size: 14px;
    border: 0;
    margin: -1px;
}

.entry-content table tr td {
    padding: 10px 15px;
}
以下は Simplenote の表示テストです。

#2013

表を一行ごとに色分けする

1月 | 2013 | comemo | ページ 12

続きを読む

#2013

テーブル(表)をページ全体に対してセンタリングする方法

最終更新日:2016-05-14


続きを読む

#2011