使用表格佈局在表格中設置td寬度：固定

據我所知，列寬度由表格的第一行決定。我的問題是表中的第一個td已將colspan設置爲'2'。這是我的表的樣子。重要的是我無法更改表格的HTML結構。使用表格佈局在表格中設置td寬度：固定

<table> 
    <tbody> 
     <tr> 
      <td colspan="2"><strong>Personal Details</strong></td> 
     </tr> 
     <tr> 
      <td> 
       <ul> 
        <li>Title: </li> 
       </ul> 
      </td> 
      <td> 
       test 
      </td> 
     </tr> 
     <tr> 
      <td colspan="2"><strong>Personal Details</strong></td> 
     </tr> 
     <tr> 
      <td> 
       <ul> 
        <li>Title: </li> 
       </ul> 
      </td> 
      <td> 
       test 
      </td> 
     </tr> 
     <tr> 
      <td colspan="2"><strong>Personal Details</strong></td> 
     </tr> 
     <tr> 
      <td> 
       <ul> 
        <li>Title: </li> 
       </ul> 
      </td> 
      <td> 
       test 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <ul> 
        <li>Title: </li> 
       </ul> 
      </td> 
      <td> 
       test 
      </td> 
     </tr> 
    </tbody> 
</table>

CSS：

table { 
    table-layout: fixed; 
    width: 100%; 
    word-wrap: break-word; 
}

我需要的是設置TD的含有<ul>元件至30％的寬度。所以td colspan ='2'成爲某種標題，下面的td元素被分割爲30/70。

來源

2015-07-20 user1346765

不能修改HTML – user1346765

對不起，沒看過那部分，看來只有這樣做的唯一方法就是改變html並添加cols：http://stackoverflow.com/questions/13841700/how-can-i-set-width-of-two-row-header-table-with-table-layout-fixed – Pete

$('strong').parents('tr').addClass('header_td'); // jquery line code...

table { 
 
    width: 100%; 
 
    word-wrap: break-word; 
 
} 
 
table { 
 
    width: 100%; 
 
    word-wrap: break-word; 
 
    border: 2px solid black; 
 
} 
 
table tr:not(.header_td){ 
 
    background : red; 
 
    color:white; 
 
} 
 
table tr:not(.header_td) td:first-child{ 
 
    max-width:30%; 
 
    width:30%; 
 
    background:green; 
 
} 
 
table tr:not(.header_td) td{ 
 
    max-width:69%; // 69% just only beacause some extra padding by element it self doesn't make chage t your structure. 
 
    width:69%; 
 
    background:black; 
 
} 
 
.header_td{ 
 
    background : grey; 
 
}

<table> 
 
    <tbody> 
 
     <tr> 
 
      <td colspan="2"><strong>Personal Details</strong></td> 
 
     </tr> 
 
     <tr> 
 
      <td> 
 
       <ul> 
 
        <li>Title: </li> 
 
       </ul> 
 
      </td> 
 
      <td> 
 
       test 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td colspan="2"><strong>Personal Details</strong></td> 
 
     </tr> 
 
     <tr> 
 
      <td> 
 
       <ul> 
 
        <li>Title: </li> 
 
       </ul> 
 
      </td> 
 
      <td> 
 
       test 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td colspan="2"><strong>Personal Details</strong></td> 
 
     </tr> 
 
     <tr> 
 
      <td> 
 
       <ul> 
 
        <li>Title: </li> 
 
       </ul> 
 
      </td> 
 
      <td> 
 
       test 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td> 
 
       <ul> 
 
        <li>Title: </li> 
 
       </ul> 
 
      </td> 
 
      <td> 
 
       test 
 
      </td> 
 
     </tr> 
 
    </tbody> 
 
</table>

這裏我更新了整個我的答案與您的新要求請看看這裏就可以了

來源

2015-07-20 11:58:14

這太棒了。我更加複雜了我的問題。你可以參考這個編輯嗎？ – user1346765

@ user1346765你的意思是複雜的我不能讓你 –

那麼，你的回答是正確的，我的代碼只有兩個「tr」元素。現在我添加了更多的元素，使用2作爲參數的僞選擇器：nth-child（2）將不再工作。 – user1346765

取出並將td:first-child { width: 30% }添加到您的CSS。

http://jsfiddle.net/louis_feat/gcgk9y7e/

來源

2015-07-20 10:48:47

我認爲固定佈局的要點是讓單詞分隔符可以工作 – Pete

@Pete公平點。沒有太多的改變html（我知道他/他不能這樣做）。有沒有瀏覽器一致的解決方法，我可以看到如果佈局需要修復... –

您可以通過使用一些僞選擇實現這一目標，它不會在IE 6,7和8的工作，雖然：

table { 
    table-layout: initial; 
    width: 100%; 
    word-wrap: break-word; 
} 

tr:not(:first-child) td{ 
    width: 70%; 
} 

tr:not(:first-child) td:first-child { 
    width: 30%; 
}

來源

2015-07-20 11:00:26

使用表格佈局在表格中設置td寬度：固定

回答

相關問題