この質問は何度か尋ねられましたが、提供された答えはどれも私を助けてくれないようです:
こちらの動作をご覧ください:http://jsfiddle.net/BlaM/bsQNj/2/
2列の「動的」(パーセントベース)レイアウトがあります。
.grid {
width: 100%;
box-sizing: border-box;
}
.grid > * {
box-sizing: border-box;
margin: 0;
}
.grid .col50 {
padding: 0 1.5%;
float: left;
width: 50%;
}
これらの各列には、列幅全体を使用することになっているテーブルがあります。
.data-table {
width: 100%;
}
.data-table td {
white-space: nowrap;
text-overflow: Ellipsis;
overflow: hidden;
}
私の問題は、そのテーブルの列の一部に、テーブルの指定された幅に収まるように切り捨てる必要があるコンテンツがあることです。しかし、それは起こりません。互いに重なり合っている2つのテーブルを取得します。
要件:
私が試したもの:
関連する質問:
テーブルレイアウトプロパティを追加する必要があります。
table-layout: fixed;
また、styleタグだけでなく、表のHTMLタグにwidth = 100%を含めます。
おそらくmax-width: 0;
私が発見したハック。
いくつかの制限があり、HTMLの代わりにCSSテーブルを使用する必要がありますが、動作します:
.leftBlock
{
width: 100%;
max-width: 0;
Word-wrap: break-Word;
overflow: hidden;
}
.rightBlock
{
width: 200px;
max-width: 200px;
min-width: 200px;
}
テーブルでの測定の動作は異なります。一般に、テーブルセルの幅は最小幅として処理されます。
余分なマークアップを追加してもかまわない場合の1つの解決策は、コンテンツを配置する各テーブルセル内にdiv
を配置することです。次に、このdivに幅または最大幅を指定します。そう
<td>http://www.xxxxxx.xxxxxxx.com/xxx_xxxx/XXXXXXXX/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx/XXXXXXXX_xXxxxx</td>
になる
<td><div>http://www.xxxxxx.xxxxxxx.com/xxx_xxxx/XXXXXXXX/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx/XXXXXXXX_xXxxxx</div></td>
等々。
更新されたフィドルを参照してください: http://jsfiddle.net/bsQNj/4/
編集:フィドルにはいくつかの作業が必要だと思います-必要な場所にdivを置くのを忘れました。しかし、私はあなたがこの考えで働くことができることを望みます。
.div {
width:300px;
border:1px solid;
}
.breaked {
Word-break: break-all;
}
table{
border:1px solid red;
}
td {
border:1px solid green;
}
<div class="div">
<table>
<tr>
<td>aaaaaaa_________________________________________-sdasd-ad-f-asfas-df-a a-sd-fa-d-ad-fa-ds-asd-a-ads-fa-df-ads-fa-d-fad-f-ad-fad-ad-sa-fda-df-</td>
<td>13</td>
</tr>
<tr>
<td>ddddddddddddd</td>
<td>aa</td>
</tr>
</table>
<br /><hr/><br />
<table class="breaked">
<tr>
<td>aaaaaaa_________________________________________-sdasd-ad-f-asfas-df-a a-sd-fa-d-ad-fa-ds-asd-a-ads-fa-df-ads-fa-d-fad-f-ad-fad-ad-sa-fda-df-</td>
<td>13</td>
</tr>
<tr>
<td>ddddddddddddd</td>
<td>aa</td>
</tr>
</table>
</div>