フロート：左変更TD幅

フィドルWhith：私は<td>にfloat: left; display: block;を適用するフロート：左変更TD幅

、<td>の幅は変化である（及び第3のブロックが外側です）。

これを適用するには、オーバーフローを使用する必要があります。

floatで2番目のテーブルのサイズを正確にする方法はありますか？

.One { 
    float: left; 
    display: block; 
    //padding: 0px; 
} 

.All { 
    outline: 1px dotted lightgrey; 
    width: 50px; 
    background-color: blue; 
} 

div { 
    width: 150px; 
    zoom: 400%; 
    background-color: yellow; 
} 

table { 
    border-spacing: 0; 
} 

<div> 
    <table> 
    <tr> 
     <td class='All One'>X</td> 
     <td class='All One'>X</td> 
     <td class='All One'>X</td> 
    </tr> 
    </table> 
</div> 

<div> 
    <table> 
    <tr> 
     <td class='All'>X</td> 
     <td class='All'>X</td> 
     <td class='All'>X</td> 
    </tr> 
    </table> 
</div>

出典

2017-04-11 Florent

ありがとうしかし、あなたがテーブルセルを浮かせているなら、あなたは悪い時を過ごすでしょう。たぶん、Flexboxはより良いアプローチでしょうか？ https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties –

あなたのテーブルdisplay:tableとあなたのTDのdisplay:table-cellを与えることにしてみて、あなたは他のコードが必要いけません。ここにあなたが必要と思うすべてのCSSがあります。

table { 
display: table; 
} 

.One { 
display: table-cell; 
//padding: 0px; 
} 

.All { 
outline: 1px dotted lightgrey; 
width: 50px; 
background-color: blue; 
}

出典

2017-04-11 12:14:13

Furkanさん、ありがとうございます。このパッチでは、オーバーフローしました：隠された機能しません:( – Florent

@Florent修正しようto：あなたは 'overflow：hidden'がどこに必要なのか説明できますか？ –

オーバーフロー：hiddenはクラスで使用されています。 – Florent

あなたは、これはTDの幅は50pxであなたの1ピクセルのアウトラインが含まれます.One

box-sizing: border-box;

クラスにこれを追加することができます。デフォルトではボックスサイズです：content-box;これは、幅と境界が別々であることを意味します。

出典

2017-04-11 12:15:52 BARNI

私はあなたのための一つの解決策を用意してい...

それは確かにあなたのために働くだろう。この1

<html> 
<head> 
<style> 

.One { 
    float: left; 
    display: block; 
    //padding: 0px; 
} 

.All { 
    outline: 1px dotted lightgrey; 
    width: 50px; 
    background-color: blue; 
} 

div { 
    width: 157px; 
    zoom: 400%; 
    background-color: yellow; 
} 

table { 
    border-spacing: 0; 
} 
</style> 
</head> 


<body> 
<div> 
    <table> 
    <tr> 
     <td class='All One'>X</td> 
     <td class='All One'>X</td> 
     <td class='All One' >X</td> 
    </tr> 
    </table> 
</div> 

<div> 
<table> 
    <tr> 
     <td class='All'>X</td> 
     <td class='All'>X</td> 
     <td class='All'>X</td> 
    </tr> 
    </table> 
</div> 
</body> 
</html>

を試してみてください..あなたがここで達成しようとしているのかわからない

出典

2017-04-11 12:18:13

ありがとうございました:) – Florent

あなたは冗談ですか？ – Florent

答えて

関連する問題