플로트 : 왼쪽 변화 TD 폭

바이올린 파크 : 나는 <td>에 float: left; display: block;를 적용하면플로트 : 왼쪽 변화 TD 폭

, <td>의 폭 변화 (상기 제 3 블록이 밖에).

오버플로를 사용하려면 이것을 적용해야합니다. 숨김.

float를 사용하여 두 번째 테이블의 크기와 정확히 같은 크기를 수행 할 수 있습니까? 테이블 display:table과 TD의 display:table-cell 및 다른 코드를 필요 없어요를 제공하는

.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

확실하지 ,하지만 테이블 셀을 뜨면 나쁜 시간을 보게 될 것입니다. 어쩌면 플렉스 박스가 더 나은 방법일까요? https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties –

보십시오. 여기 당신이 필요하다고 생각하는 모든 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

당신은이 TD의 너비의 50 픽셀에 1 픽셀의 개요를 포함 명중 한명

box-sizing: border-box;

클래스에이를 추가 할 수 있습니다. 기본적으로 상자 크기 : 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 폭

답변

관련 문제