htmlテーブルで、セルの横幅を固定したい

Question

Javascript、CSS、JQueryを使用してテーブルを作成しました。
テーブル内のセルが文字数によって自動調整されてしまうのを防ぎたく、ヘッダー部分にwidthでサイズ指定を入れようと思ったのですが、
colspanを使用しているためtable-layout:fixed;が動作しませんでした。

また、colgroupについても調べましたが、ボディ内のセルにもcolspanを設定しているためうまく動作しない状況です。

いろいろ方法を調べてみたのですが上手くいかないので、皆様のご意見をいただけたらと思います。
宜しくお願い致します。

皆様ご回答ありがとうございます。初心者丸出しの質問で申し訳ございません。

一部分ですがHTMLは下記のような状況です。

<table>
<thead>
<tr>
<td colspan="6">タイトル</td>
</tr>
</thead>
<tr>
<td colspan="2">値１</td>
<td colspan="2">値２</td>
<td colspan="2">値３</td>
</tr>
.
.
.

値が入っているtdタグは、colspanが2,3,6のどれかが条件に応じて入るようになっています。

テーブルには table-layout:fixed; を設定しています。
theadタグ内のtdに対して、widthで指定してみたのですが、その下の値が入っているtdタグの値の長さに影響を受けてしまう状態です。

とある理由でHTMLは直接記述できず、jsとJQueryのみで要素を追加編集しておりますため、
ソースコードがかなりの行になってしまうので載せませんでした。
申し訳ございませんでした。

Comments

[m.ts10806]

ご自身の現在のコードと試してみたコードをご提示ください。

[yambejp]

「ボディ内のセルにもcolspanを設定」の意味がわかりません
htmlで簡潔なサンプルを提示してください

Answer 1

動作しませんでした。

なるほど、動作しない原因は他にあるだろうと思うので
決め打ちで回答します。

---

table-layout: fixedの仕様です。

表と列の幅は table 要素と col 要素の幅によって、または最初の行のセルの幅によって設定されます。

後続する行のセルは列幅の設定に影響しません。

最初の行のセルの幅によって設定されます。
動作しない原因は1行目をタイトル名一覧にして、2行目以降のデータに対して幅を設定したのでは？
もしそうであれば、第一行目のタイトル名の所に幅を設定してください。

Comments

[miyabi-sun]

まぁ、この可能性が一番高いので、
みんながソースコード見せろって言ってるわけですね。
もし違うなら質問文の編集機能を使って追記してみてください。

Answer 2

全体的に意味がつかめていないのですが
colspanのないtdに対してwidthを設定するとかではだめなのでしょうか？

<style>
#t1 {border-collapse:collapse;}
#t1 td{border:solid 1px #000000;}
td:not([colspan]) {
width:100px;
}
</style>
<table id="t1">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td colspan="2">4</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td colspan="2">7</td>
</tr>
<tr>
<td colspan="3">8</td>
</tr>
</table>

Answer 3

また、colgroupについても調べましたが、ボディ内のセルにもcolspanを設定しているためうまく動作しない状況です。

colspanを無視して1列ずつ<col>を入れていけば、それぞれにスタイルを適用することは可能かと思います（table-layout: fixedをかけておきましょう）。