tdの幅、機能しない？

だから私はこのコードをここに持っています：

<table>
    <tr>
        <td width="200px" valign="top">
            <div class="left_menu">
                <div class="menu_item">
                    <a href="#">Home</a>
                </div>
            </div>
        </td>
        <td width="1000px" valign="top">Content</td>
    </tr>
</table>

CSSを使って

.left_menu {
    background: none repeat scroll 0 0 #333333;
    border-radius: 5px 5px 5px 5px;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12px;
    font-weight: bold;
    padding: 5px;
}

.menu_item {
    background: none repeat scroll 0 0 #CCCCCC;
    border-bottom: 1px solid #999999;
    border-radius: 5px 5px 5px 5px;
    border-top: 1px solid #FFFFCC;
    cursor: pointer;
    padding: 5px;
}

私のブラウザーでは問題なく動作し、MacとPCの両方のすべてのブラウザーでテストしましtdたがwidth、200 のwithで幅が変化し続けるという苦情が寄せられています。私は彼が何について話しているのか分かりません。なぜ彼または彼女は幅の変化を見ているのか知っていtdますか？

そのはず：

<td width="200">

または

<td style="width: 200px">

セルに200pxに収まらないコンテンツ（などsomelongwordwithoutanyspaces）が含まれtable-layout: fixedている場合でも、CSSにテーブルが含まれていない限り、セルは伸びます。

編集

クリスティーナの子供たちが答えに述べたように、width属性とインラインCSS（属性を使用）の両方を使用しないでくださいstyle。スタイルと構造をできるだけ分離することをお勧めします。

テーブルの幅や高さは標準ではなくなりました。Ianzzが言うように、それらは非推奨です。代わりに、これを行う最善の方法は、セルを開いたまま希望のサイズに保つために、テーブルセル内にブロック要素を置くことです。

<table>
    <tr>
        <td valign="top">
            <div class="left_menu">
                <div class="menu_item">
                    <a href="#">Home</a>
                </div>
            </div>
        </td>
        <td valign="top" class="content">Content</td>
    </tr>
</table>

CSS

.content {
    width: 1000px;
}

.left_menu {
    background: none repeat scroll 0 0 #333333;
    border-radius: 5px 5px 5px 5px;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12px;
    font-weight: bold;
    padding: 5px;
    width: 200px;
}

.menu_item {
    background: none repeat scroll 0 0 #CCCCCC;
    border-bottom: 1px solid #999999;
    border-radius: 5px 5px 5px 5px;
    border-top: 1px solid #FFFFCC;
    cursor: pointer;
    padding: 5px;
}

 <table style="table-layout:fixed;">

これによりスタイル幅が強制されます<td>。テキストがいっぱいになると、他の<td>テキストと重なります。メディアクエリを使用してみてください。

テーブルのwidth/ height属性で単位を指定することはできません。これらは常にピクセル単位ですが、非推奨であるため、使用しないでください。

「table-layout：fixed;」を試すことができます。あなたのテーブルへ

table-layout: fixed;
width: 150px;

150pxまたは希望の幅。

リファレンス：https : //css-tricks.com/fixing-tables-long-strings/

<td>タグcss 内で使用できます：display:inline-block

お気に入り： <td style="display:inline-block">

使ってみる

word-wrap: break-word;

この助けを願っています

これを試して：

word-break: break-all;

私が使う

<td nowrap="nowrap">

折り返しを防ぐには：https : //www.w3schools.com/tags/att_td_nowrap.asp

使用する

<table style="table-layout:fixed;">

テーブルを強制的に100％の幅に設定します。次に、このコードを使用します

$('#dataTable').dataTable( {
        bAutoWidth: false, 
        aoColumns : [
          { sWidth: '45%' },
          { sWidth: '45%' },
          { sWidth: '10%' },
              ]
      });

（テーブルIDはdataTableで、3つの列があります）各セルの長さを指定します

theadの列の幅を調整すると、テーブル全体に影響することに注意してください。

<table>
    <thead>
        <tr width="25">
            <th>Name</th>
            <th>Email</th>
        </tr>
    </thead>
    <tr>
        <td>Joe</td>
        <td>joe@email.com</td>
    </tr>
</table>

私の場合、thead> trの幅がtable> tr> tdの幅を直接オーバーライドしていた。

私は多くの解決策を試しましたが、うまくいきませんでしたので、テーブルでフレックスを試しましたが、border-collapseなどのすべてのテーブル機能でうまくいきました。

これは私のHTML要件でした

<table>
  <thead>
    <tr>
      <th>1</th>
      <th colspan="3">2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td colspan="3">2</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td colspan="2">3</td>
    </tr>
  </tbody>
</table>

私のCSS

table{
    display: flex;
  flex-direction: column;
}
table tr{
    display: flex;
  width: 100%;
}
table > thead > tr > th:first-child{
    width: 20%;
}
table > thead > tr > th:last-child{
    width: 80%;
}
table > tbody tr > td:first-child{
    width: 10%;
}
table > tbody tr > td{
    width: 30%;
}
table > tbody tr > td[colspan="2"]{
    width: 60%;
}
table > tbody tr > td[colspan="3"]{
    width: 90%;
}
/*This is to remove border making 1px space on right*/
table > tbody tr > td:last-child{
    border-right: 0;
}

この問題は非常に簡単に使用して解決されるmin-widthとmax-width、CSSルール中でます。

HTML

<table>
  <tr>
    <td class="name">Peter</td>
    <td class="hobby">Photography</td>
    <td class="comment">A long comment about something...</td>
  </td>
</table>

CSS

.name {
  max-width: 80px;
  min-width: 80px;
}

これにより、最初の列の幅が80pxになります。通常、ほとんど幅がない列が非常に空であるテーブルを作成することから、非常にまれに長すぎるテキストを支配するために、最小幅なしで最大幅のみを使用します。OPの質問は、固定幅に設定することでしたが、両方のルールが一緒になっています。多くのブラウザwidth:80px;CSSのでは、テーブルの列は無視されます。HTML内での幅の設定は機能しますが、本来行うべき方法ではありません。

幅の最小ルールと最大ルールを使用することをお勧めします。これらを同じに設定するのではなく、範囲を設定してください。このようにテーブルでそれを実行できますが、過度に長いコンテンツをどうするかについてのヒントを与えることができます。

テキストが折り返されて行の高さが高くならないようにしたいが、それでもユーザーが全文を表示できるようにしたい場合は、 white-space: nowrap;は、メインルールでし、幅とノーラップのルールを削除するホバールールを適用しますマウスをコンテンツの上に置くと、ユーザーはコンテンツ全体を見ることができます。このようなもの：

CSS

.name {
  max-width: 80px;
  white-space: nowrap;
  overflow: hidden;
}
.name:hover {
  max-width: none;
  white-space: normal;
  overflow:auto;
}

それはあなたが何を達成しようとしているのかに正確に依存します。これが誰かの役に立つことを願っています。PS余談ですが、iOSの場合、ホバーが機能しない問題が修正されました-iOS SafariおよびChromeでCSSホバーが機能しないをご覧ください