浮子：左变化TD宽度

当我申请float: left; display: block;到<td>，的<td>宽度变化（和第三块是外）。

我需要应用这个溢出：隐藏。

我怎么能做到完全相同大小的第二个表与浮动？

.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'？ –

溢出：隐藏在课堂上使用。全部 – Florent

您可以添加这个类。一是

box-sizing: border-box;

这将包括在TD的宽度50像素的1像素的轮廓。默认情况下是box-sizing：content-box;这意味着宽度和边框是分开的。

来源

2017-04-11 12:15:52 BARNI

我为你准备一个解决方案..

试试这个

<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

浮子：左变化TD宽度

回答

相关问题