※当サイトの記事には、広告・プロモーションが含まれます。

HTMLのtableタグへのCSSのmax-widthを妨害してるのはテキストの折り返しの問題もある話

gigazine.net

歴史上最も古い物語として知られるギルガメシュ叙事詩は、現在まで残っている写本は紀元前2000年紀初頭のもので、オリジナルはさらに古く紀元前4000年紀に書かれたと考えられています。

古代シュメール人はどのようにして世界初の文字体系を作成したのか? - GIGAZINE

それほど古い時代に古代シュメール人はどのようにして文字体系を作成したのか、メトロポリタン美術館の古代近東美術部門で委員会のメンバーを務めるジャーナリストのバートル・ブル氏が著書の中で解説しています。

古代シュメール人はどのようにして世界初の文字体系を作成したのか? - GIGAZINE

⇧ コミュニケーションとかどうしていたのか気になりますな。

HTMLのtableタグへのCSSのmax-widthを妨害してるのはテキストの折り返しの問題もある話

前回の、

ts0818.hatenablog.com

⇧ 記事を書いていた際に、HTMLのtableタグにmax-widthが効かないんだが?という状況に遭遇して、ネットの情報を漁って試してみるも上手くいかなくてハマったので備忘録として。

とりあえず、

qiita.com

⇧ 上記サイト様がまとめて下さっています。

■1. <td>タグの中のテキストそのまま

<table style="max-width: 600px;">
  <thead>
    <tr>
      <th>No</th>
      <th>カテゴリ</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Actuator Properties</td>
      <td>
        management.appoptics.metrics.export.api-token
      </td>
    </tr>
    <tr>
      <td>2</td>
      <td>Actuator Properties</td>
      <td>
        management.appoptics.metrics.export.batch-size.management.appoptics.metrics.exportmanagement.appoptics.metrics.export.batch-size.management
      </td>
    </tr>
  </tbody>
</table>  

■2. <td>タグの中のテキストを<p>タグで囲む

<table style="max-width: 600px;">
  <thead>
    <tr>
      <th>No</th>
      <th>カテゴリ</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Actuator Properties</td>
      <td>
        <p>management.appoptics.metrics.export.api-token</p>
      </td>
    </tr>
    <tr>
      <td>2</td>
      <td>Actuator Properties</td>
      <td>
        <p>management.appoptics.metrics.export.batch-size.management.appoptics.metrics.exportmanagement.appoptics.metrics.export.batch-size.management</p>
      </td>
    </tr>
  </tbody>
</table>

■3. <td>タグの中のテキストを<p>タグで囲む、且つ、テキストを折り返すCSS

<table style="max-width: 600px;">
  <thead>
    <tr>
      <th>No</th>
      <th>カテゴリ</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Actuator Properties</td>
      <td>
        <p>management.appoptics.metrics.export.api-token</p>
      </td>
    </tr>
    <tr>
      <td>2</td>
      <td>Actuator Properties</td>
      <td>
        <p style="line-break: anywhere;">management.appoptics.metrics.export.batch-size.management.appoptics.metrics.exportmanagement.appoptics.metrics.export.batch-size.management</p>
      </td>
    </tr>
  </tbody>
</table>

⇧ とある内の、「3. <td>タグの中のテキストを<p>タグで囲む、且つ、テキストを折り返すCSS」のパターン以外は、テキストが折り返しされないため、max-widthを妨害してしまうのである。

まぁ、実業務では役に立たないであろう情報だが、ネット上に情報が見当たらなかったので、記事にしてみました。

毎度モヤモヤ感が半端ない…

今回はこのへんで。