2012-02-02 12 views
3

更新: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> 

私はstackoverflowの検索と、次の記事を見つけましたが、彼らは私の答えではありません。

+0

テーブルレイアウトを固定に設定して、幅をセルの数で割った合計幅に設定してセルサイズを調整できませんでしたか? – j08691

答えて

3

tabletable-layout:fixedを使用して、内容に応じてブラウザの自動サイズ変更を停止することができます。次に、それぞれにTDの幅を設定する必要があります。設定された幅のないTDは、残りの幅を占有します。

+1

"次に、各TDに設定された幅を与えなければなりません。設定されていないTDは、残りの幅を占めます。 - すべてのセルの幅が同じになるようにするには、 'table-layout:fixed'を' table'に設定し、 'td'の幅を設定しない方が簡単です。 – thirtydot

+0

これは問題を解決しましたが、私もcolspansを持っています。あなたは私の新しい質問を見てみませんか? http://stackoverflow.com/questions/9126565/colspan-equal-cell-width-after-multiple-columns-are-removed – AlexStack

1

100%未満になるパーセンテージを使用すると、Webブラウザは通常、あたかもそうであるかのようにすべてを伸ばします。 100%を超えるパーセンテージを使用すると、ブラウザによっては、セルがテーブルの設定幅を超えることがあります。それらがすべて同じで、それらが100%未満で等しい限り、それらはスペース(テーブルの幅)を等しく分割します。あなたが将来どのくらいの列を持っているのかわからない場合は、幅に1%を使用してください。これにより最大100列の余裕ができます。 しかし、いくつかのテストが必要です。すべてのブラウザがこのように動作しているかどうかは不明です。ここで

1

はjQueryの内のソリューションです:

$(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+'%'); 
}); 
}); 

私はあなたがこのコードは、ページ上の他のテーブルをいじり、それを避けるために実行したいテーブルにクラスを追加することをお勧めします。

EDIT:ここhttp://jsfiddle.net/rj7UK/

0

@vaidasは正しい軌道に乗っていたバイオリンですが、列が小さすぎて作ることは私のために動作しませんでした。クロムは、Firefox、IEとエッジの最新(Aug'2016)のバージョンでは

table td { width: 500px }

、それは次のようになります。私のソリューションは、このように、あまりにも、およびpxではない%それらを作ることですこれはenter image description here

関連する問題