여러 열을 제거한 후 동일한 셀 너비

업데이트 : 여기에 a follow up question with colspans입니다.여러 열을 제거한 후 동일한 셀 너비

나는 8 개의 열이있는 테이블을 가지고 있습니다. 런타임에 숫자가이면이 요소는 제거됩니다.

나머지 열의 너비는 같습니다. 문제는 요소 내부의 텍스트의 너비가 다른 경우입니다. 왜냐하면 브라우저가 각 셀 안의 텍스트 길이에 따라 셀 너비를 설정하기 때문입니다.

enter image description here

을 그리고 여기에 코드입니다 : OK,이 이미지는 아마 더 잘 말한다

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<style type="text/css"> 
table{ 
    width:600px; 
} 
table td{ 
    border:1px solid red; 
    text-align:center; 
    background-color:#FFFFCC; 
} 
caption{ 
    color:blue; 
    font-size:80%; 
} 
</style> 
<title></title> 
</head> 
<body> 
<table> 
    <caption>Original table</caption> 
    <tr> 
     <td>1</td> 
     <td>2</td> 
     <td>3</td> 
     <td>4</td> 
     <td>5</td> 
     <td>6</td> 
     <td>7</td> 
     <td>8</td> 
    <tr> 
</table> 
<table> 
    <caption>After some columns are removed</caption> 
    <tr> 
     <td>1</td> 
     <td>2</td> 
     <td>4</td> 
     <td>5</td> 
     <td>7</td> 
     <td>8</td> 
    <tr> 
</table> 
<table> 
    <caption>I want these to have the same width</caption> 
    <tr> 
     <td>1</td> 
     <td>Two</td> 
     <td>Three</td> 
     <td>Column number four</td> 
     <td>5</td> 
    <tr> 
</table> 
<table> 
    <caption>I want these to have the same width, too</caption> 
    <tr> 
     <td>1</td> 
     <td>Column number four</td> 
     <td>5</td> 
    <tr> 
</table> 
</body> 
</html>

I에 유래 검색 다음과 같은 글을 발견하지만 내 대답하지 :

출처

2012-02-02 AlexStack

테이블 레이아웃을 고정으로 설정 한 다음 총 너비를 셀 수로 나눈 값으로 각 너비를 설정하여 셀 크기를 조정할 수 없습니까? – j08691

table에서 table-layout:fixed을 사용하면 내용에 따라 브라우저 자동 크기 조정을 중지 할 수 있습니다. 그런 다음 각 너비를 TD에게 주어야합니다. 설정된 너비가없는 TD은 나머지 너비를 차지합니다.

출처

2012-02-02 16:26:39 472084

"그러면 각 TD에 설정된 너비를 지정해야합니다. 너비가 설정되지 않은 TD는 나머지 너비를 차지합니다." - 그래서, 모든 셀을 같은 너비로 만들려면 가장 쉬운 방법은'table-layout : fixed'를'table'에 설정하고'td'의 너비를 설정하지 않는 것입니다. – thirtydot

글쎄,이 문제를 해결하지만뿐만 아니라 colspans 있습니다. 내 새로운 질문을 좀 들려 주시겠습니까? http://stackoverflow.com/questions/9126565/colspan-equal-cell-width-after-multiple-columns-are-removed – AlexStack

백분율이 100 % 미만인 백분율을 사용하면 웹 브라우저는 일반적으로 마치 모든 것처럼 확장됩니다. 100 %를 넘는 백분율을 사용하면 브라우저에 따라 셀이 테이블의 너비를 초과 할 수 있습니다. 그것들이 모두 같고 100 % 미만이면, 그들은 공간 (테이블의 너비)을 똑같이 나눌 것입니다. 앞으로 얼마나 많은 열을 보유할지 잘 모르겠 으면 너비에 1 %를 사용하십시오. 이렇게하면 최대 100 개의 열에 대한 여유가 생깁니다. 그러나 일부 테스트가 필요합니다. 모든 브라우저가 이런 식으로 행동하는지 확실하지 않습니다.

$(document).ready(function(){ 
$('table').each(function(){ 
    var tds = $(this).find("tr").eq(0).find("td").size(); 
    var percent = 100/tds; 
    $(this).find('td').css('width',percent+'%'); 
}); 
});

난 당신이 코드는 페이지의 다른 테이블과 장난을 방지하기 위해에 실행하려는 테이블에 클래스를 추가하는 것이 좋습니다 :

출처

2012-02-02 16:39:49 vaidas

여기에 jQuery를 내 솔루션입니다.

편집 : 여기 http://jsfiddle.net/rj7UK/

출처

2012-02-02 16:40:13

@vaidas는 바른 길에 있던 바이올린,하지만 열이 너무 작게 만드는 것은 나를 위해 작동하지 않았다. 내 솔루션 그들이 너무 큰 수 있도록하는 것입니다,이 같은 px하지 %에 : 크롬, 파이어 폭스, IE 및 Edge의 최신 (Aug'2016) 버전으로

table td { width: 500px }

, 그것과 같다 이 :