0

*やりたいこと
table内の指定のセル幅を固定にしたい
例のコードのように複数のテーブルがある場合、
セル中の文字列の長さに関わりなく、どのテーブルであっても、3つのセルの長さ(横幅)を固定(同一の長さ)にしたい。

*やってみたこと

<style>
.width100{
  width:100px;
}
.width150{
  width:150px;
}
.tb-fix{
  table-layout:fixed;
}
.td-fix{
   word-wrap:break-word;
 }
</style>
最初のテーブル
<table class="tb-fix">
  <colgroup>
    <col style="width:15%;">
    <col style="width:75%;">
    <col style="width:10%;">
  </colgroup>
<tr>
  <td class="td-fix ">
  あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそ
  </td>
  <td>
 なにか大量の文字列・・・・・
  </td>
  <td class="td-fix">
  アイウエオカキクケコサシスセソ
  </td>
</tr>
</table>
二番目のテーブル
<table class="tb-fix">
  <colgroup>
    <col style="width:15%;">
    <col style="width:75%;">
    <col style="width:10%;">
  </colgroup>
<tr>
  <td class="td-fix">
  短い文字列
  </td>
  <td>
 日本語モジレツ
  </td>
  <td class="td-fix">
  アイ 
  </td>
</tr>
</table>
三番目のテーブル
<table class="tb-fix">
  <colgroup>
    <col style="width:15%;">
    <col style="width:75%;">
    <col style="width:10%;">
  </colgroup>
<tr>
  <td class="td-fix">
  短い文字列
  </td>
  <td>
 長い英文・・・・・
  </td>
  <td class="td-fix">
  短い英文
  </td>
</tr>
</table>

ただし、真ん中のセルには、日本語のかなり長い文字列が入る前提ですが、まれに英文の場合もあります。したがって、真ん中のセル幅によって、左のセルの幅が変わってくるのが現状です。
英文であっても、日本語(全角文字)であっても、関係なく、各テーブルのセル幅を同じにしたいです。

左のセルの中の文字列が短い場合は、左のセル幅が狭くなってしまうという問題も発生しています。

どうしたら、どのテーブルも、セル幅を同一にすることができるでしょうか?

1

1 件の回答 1

1

tableの幅を同一にします。

(下記スニペットではわかりやすいよう各カラムに色付けをしました。)

<style>
table {
  width: 80%;
}
.width100{
  width:100px;
}
.width150{
  width:150px;
}
.tb-fix{
  table-layout:fixed;
}
.td-fix{
   word-wrap:break-word;
 }
td:nth-child(1) {
  background: #fee;
}
td:nth-child(2) {
  background: #efe;
}
td:nth-child(3) {
  background: #eef;
}
</style>
最初のテーブル
<table class="tb-fix">
  <colgroup>
    <col style="width:15%;">
    <col style="width:75%;">
    <col style="width:10%;">
  </colgroup>
<tr>
  <td class="td-fix ">
  あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそ
  </td>
  <td>
 なにか大量の文字列・・・・・
  </td>
  <td class="td-fix">
  アイウエオカキクケコサシスセソ
  </td>
</tr>
</table>
二番目のテーブル
<table class="tb-fix">
  <colgroup>
    <col style="width:15%;">
    <col style="width:75%;">
    <col style="width:10%;">
  </colgroup>
<tr>
  <td class="td-fix">
  短い文字列
  </td>
  <td>
 日本語モジレツ
  </td>
  <td class="td-fix">
  アイ 
  </td>
</tr>
</table>
三番目のテーブル
<table class="tb-fix">
  <colgroup>
    <col style="width:15%;">
    <col style="width:75%;">
    <col style="width:10%;">
  </colgroup>
<tr>
  <td class="td-fix">
  短い文字列
  </td>
  <td>
 長い英文・・・・・
  </td>
  <td class="td-fix">
  短い英文
  </td>
</tr>
</table>

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。