CSS 備忘録 | メシのタネ

このエントリーをはてなブックマークに追加

テーブルタグの結合とかやっかいな事全般

 2013/03/30

慣れない事から学ぶこと

今の会社に入ってから、今までやらなかったような事をやる事がある。
管理画面の作成とか、結構テーブルでやって欲しいって依頼があったりする。
多分プログラマーが導入しやすいからなんだろうけど。うち限定かもしんないが。
そんな訳で、業務系のプログラムをやる事が多いのでprint用cssとかテーブルレイアウトとかシステム開発とか
今までやらなかった事をやっております。

ほんでテーブルが案外やっかいなんだ

テーブル用のプロパティが多いとか、
結合すると何か横幅が上手く行かなかったりとか、
設定値入れないとtdの間になんか1pxスペース入るとか、

固定しとかないと、親タグいっぱい広がって行くとか、
以外に面倒。前職が、媒体運営だったから、テーブルには慣れてるつもりだったけど
そんなもんは所詮つもりの世界だったんですね。

結合時のwidth無視回避法

多分これは、いい方法ではないんですけど、
予めテーブルのセル数を数えて結合しないで一行目に空タグを入れるの。


<table>

<tr>
<td></td>
<td></td>
<td></td>
</tr>

<tr>
<td colspan="2"></td>
<td></td>
</tr>
<tr>
<td></td>
<td colpan="2"></td>
</tr>

</table>


こんな具合にやっとけば、一番上のwidth指定通りにそろいます。
なんでかは分からない。教えてください。

親タグ一杯に広がって行くテーブル

いやまてよ。何勝手に文字数分でかくなってんの君。

だからテーブルって嫌なのよね。マジで

って思う前にググると大体、そういうの回避するプロパティがあります。
こんなの。


table-layout:fixed; #列幅を固定。
table-layout:auto;  #自動でレイアウトされます。

なんかtdの間に線がつくんですけど

これの対策ようのプロパティもあります。
いつも忘れますけどこーらすぺーしんぐ?なんだっけ。


border-collapse: collapse; #隣接するセルの線を重ねて表示
border-collapse: separate; #隣接するセルの線を離して表示

これで大体ぱちっとなります。
結合した時なんでああゆう事しないといけないんだろうなぁ。


このエントリーをはてなブックマークに追加

コメント

"テーブルタグの結合とかやっかいな事全般"
でメシのタネのおすすめを検索したよ!

プログラミング備忘録 | メシのタネ