メシのタネ

めしのたねになるIT情報配信サイト


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

,

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

慣れない事から学ぶこと

今の会社に入ってから、今までやらなかったような事をやる事がある。
管理画面の作成とか、結構テーブルでやって欲しいって依頼があったりする。
多分プログラマーが導入しやすいからなんだろうけど。うち限定かもしんないが。
そんな訳で、業務系のプログラムをやる事が多いので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; #隣接するセルの線を離して表示

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


コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

This site uses Akismet to reduce spam. Learn how your comment data is processed.

若い頃、「仕事中にハマったこと」や「誰かに共有したい技術的な気づき」をアウトプットしたくてブログを始めましたが、勢い任せでよく分からない記事を大量生産し、あえなく飽きて終了。

改めて今、キャリア15年分の経験や知識が、これからITエンジニアを目指す方や、同じような課題で悩んでいる現役エンジニアの「メシのタネ」になるような記事を残したいと思っています。
※過去の記事は見ると精神が崩壊するため、そっとしておいてください。

🛠 経歴という名の珍道中:
文系Fラン → 広告営業 → Web営業 → 通信営業 → Web進行 → 出版 → Web媒体運用 → ソフトウェアハウス → SES → フリーランス

専門教育も受けず、転職歴も多数。履歴書はまるで時系列の事故記録のようですが、試行錯誤を重ね、なんとかエンジニアとして食べています。

このブログでは、そんな「履歴書クラッシャー型エンジニア」が送る、
名古屋一敷居の低い、実務に役立つ技術ブログを目指します。

PHP
魔王と行く! / Interface / Polymorphism / Ontology 深淵ガイドNew!!
Laravel
Laravel 12、「コード 1 行も書き換えず未来へ」──静かな革命の手順書New!!
Laravel
LaravelのMiddlewareって意味あるの?仕組み・使いどころ・やらかしまで整理してみたNew!!
Laravel
ServiceProviderって何してるの?DIの背後で動いてるやつの正体New!!
Laravel
LaravelのサービスコンテナとDI、「書いてるだけで動く」コードの正体
Laravel
Laravelのアーキテクチャ、実は誰もわかってない説