テーブルのTD幅が伸びる問題。難しい~_html/css_WEB-ITnose

WBOY
リリース: 2016-06-24 11:26:34
オリジナル
1386 人が閲覧しました

最初にコードを貼り付けてください

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title></title>    <style>      .aa {    border-collapse: collapse;        table-layout:fixed;}    .aa td {        border: 1px solid #ccc;         word-break:break-all;    }    </style></head><body>    <table  class="aa">        <tr>            <td width="80">d</td>            <td width="80">df</td>            <td width="80">b</td>            <td width="70">bv</td>        </tr>        <tr>            <td>ffffffffffffffffffffffffffffffffffff</td>            <td>a</td>            <td>a</td>            <td>a</td>        </tr>    </table></body></html>
ログイン後にコピー


最初の行と最初の列の TD 幅は 80 に設定されています。同じ列の TD が 80 幅になるのは当然であり、自動行折り返しも設定されています-break:break-all; ただし、2 行目、1 列目の td は引き続き開かれます。 IEでは正常に動作します。Webkitカーネルを使用してSogouでテストしました。 ! !


ディスカッションに返信 (解決策)



上の図にあるように、なぜこのフォーラムに誰もいないのですか

最初に width= を追加します2行目の列「80」

2行目1列目にwidth="80"を追加します


この方法は知っています。しかし、今後作成するテーブルは非常に大きいので、jq を使用して各 TD に幅を追加するのは冗長すぎると思われます。他の解決策を見つけたいです

2 行目と 1 列目に width="80" を追加します。

これは私がその方法を知っています。しかし、将来作成するテーブルは非常に大きいので、jq を使用して各 TD に幅を追加するのは冗長すぎると思われます。他の解決策を見つけたいです。行と最初の列 ="80"

この方法は知っています。しかし、将来作成するテーブルは非常に大きいので、jq を使用して各 TD に幅を追加するのは冗長すぎるように思えます。他の解決策を見つけたいです

css

.aa tr td:first-child{	        width: 80px;    }
ログイン後にコピー

しかし、幅は固定されていません。これらはすべて、ページがロードされるときに jq ループから私によって追加されます。他の解決策はありますか?今 table tr td:nth-child(n)')、幅を 1 つずつ追加します


幅も動的です。動的 css のみ可能です


$('table tr td:nth- through jq しか書けません。 now child(n)') メソッドで、幅を 1 つずつ追加します


表に幅を追加できます。4 つのセルの幅 + 5 つの境界線の幅 = 315px です。 おおよそ問題ありませんが、ブラウザで見ると、幅が 314px になっていますが、何が起こっているのかわかりません
でも、この方法で元の投稿者の問題は解決できるはずです
直接 0px に設定できるようです
データは管理されているので、 jq を使用してから、jq を使用して幅を設定します。 。


これで、jq

を通して $('table tr td:nth-child(n)') を書くことによって幅を 1 つずつ追加することしかできません
テーブルに幅を追加できます (4 つのセルの幅 + ) 5枠の幅= 315px 大体OKですが、ブラウザで確認すると幅が314pxになっていました 何が起こっているのか分かりません

でも、この方法で元の投稿者の問題は解決するはずです

お願いします。まず返信してください。試してみます


テーブルの width=0 に従ってテストしました。無効のようです。

ただし、これは全幅を制限することで可能になります。写真に示すように、

これで、jq
を介して $('table tr td:nth-child(n)') を記述することによって幅を 1 つずつ追加することしかできません

テーブルに幅を追加できます、4セルの幅+5本の枠線の幅= 315px
大体OKですが、ブラウザで確認すると幅が314pxになっていました
でも、この方法で元は解決するはずです。投稿者さんの問題

方法をありがとうございます。これは Webkit カーネルのバグであるはずで、テーブル幅を増やさなくても IE では正常に動作します。
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート