如何在固定布局表中创建可变宽度？ [英] How to create changeable width in fixed layout table?

问题描述

我有一个包含三个< td> 单元格的表格。

• 第一个< td> 的宽度应取决于内容。


• 第二个的宽度 < td> 应该永远固定。


• 第三个的宽度< td>
第三个< td> 的宽度应在不同的屏幕中更改。




strong>为了防止出现第三个< td> 的内容，我应该使用 table-layout：fixed; 和 width：100％; 。另外，我需要为< td> 使用 word-wrap：break-word; 关键是我不想使用 word-break：break-all; 而不是 word-wrap 。 （因为它打破了中间的单词< td> ）





---





这是我的尝试：





HTML：


$ b b

 < div class =container> 
< table> 
< tr> 
< td class =VN>取决于数字的数量< / td> 
< td class =S>始终固定< / td> 
< td class =CT>所有其余（剩余）< / td> 
< / tr> 
< / table> 
< / div> 
  

CSS：

 code> .container {
 width：60％; 
} 
 
表{
 table-layout：fixed; 
 width：100％; 
} 
 
 td {
 word-wrap：break-word; 
 vertical-align：top; 
} 
 
 .VN {
 width：auto; 
} 
 
 .S {
 width：10px; 
} 
 
 .CT {
 width：98％; 
} 
  

也





---





我想要的是这样的： / p>



example1：

  --- + ---------------------------------------------- --------- + 
 | 4 | fix |这是一个测试...！ | 
 +  -  + --- + --------------------------------------- ---------------- + 
  

example2 ：

  + ---- + --- + ----------- ----------------------------------------- + 
 | 2 | fix |这是一个测试...！ | 
 + ---- + --- + ------------------------------------ ---------------- + 
 | | fix |这没有任何第一< td> ...！ | 
 + ---- + --- + ------------------------------------ ---------------- + 
 | 1234 | fix |这没有任何第一个< td> ...！ | 
 + ---- + --- + ------------------------------------ ---------------- + 
  

example3 ：

  + --- + --- + ------------ ----------------------------------------- + 
 | 123 | fix |单元格的投票数量的宽度应该是| 
 | | |可变，并且应该注意，该单元是| 
 | | | break-word。 | 
 + --- + --- + ------------------------------------- ---------------- + 
  

example4 ：

  + --- + --- + ------------ ----------------------------------------- + 
 | 123 | fix |它是一个集成的testtttttttttttttttttttttttttttttttttt | 
 | | | ttttttttttttttttttttttttttttttttttttttttttttttttttttttttt | 
 | | | tttttttttttttttttttttttttttttttttttttttttttt | 
 + --- + --- + ------------------------------------- ---------------- + 
  

example5 ：

  + --- + ---------------- ----------------------------------------- + 
 | fix | this没有任何第一< td> ..然后删除VN单元！ | 
 + --- + ----------------------------------------- ---------------- + 
 | fix |这没有任何第一< td> ..然后删除VN单元格！ | 
 + --- + ----------------------------------------- ---------------- + 
  





---




解决方案

请尝试此属性：

p>



白色空格：pre-line;





更多具有不同行为的值 此处




I have a table containing three <td> cells.

• The width of the first <td> should depend on the content.
• the width of the second <td> should be fixed forever.
• the width of the third <td> should fill the remaining space.

Note1: My website is responsive; the width of third <td> should be changed in different screen.

Note2: For preventing going out the content of third <td>, I should use table-layout: fixed; and width: 100%; for my table. Also, I need to use word-wrap: break-word; for the <td>s. the point is that I don't want to use word-break: break-all; instead of word-wrap. (because it breaks the words in the middle <td>)

---

Here is my attempt:

HTML:

<div class="container">
   <table>
      <tr>
         <td class="VN">depends on the number of digit</td>
         <td class="S">always fixed</td>
         <td class="CT">all of the rest (remaining)</td>
      </tr>
   </table>
</div>

CSS:

.container{
   width: 60%;
}

table{
   table-layout: fixed;
   width: 100%;
}

td{
   word-wrap: break-word;
   vertical-align: top;
}

.VN{
   width: auto;
}

.S{
   width: 10px;
}

.CT{
   width: 98%;
}

Also here is a fiddle.

---

What I want is like these:

example1:

+-+---+-------------------------------------------------------+
|4|fix|this is a test...!                                     |
+-+---+-------------------------------------------------------+

example2:

+----+---+----------------------------------------------------+
|2   |fix|this is a test...!                                  |
+----+---+----------------------------------------------------+
|    |fix|this has not any first <td>...!                     |
+----+---+----------------------------------------------------+
|1234|fix|this has not any first <td>...!                     |
+----+---+----------------------------------------------------+

example3:

+---+---+-----------------------------------------------------+
|123|fix|the width of number of vote up cell should be        |
|   |   |changeable and it should be noted that this cell is  |
|   |   |break-word.                                          |
+---+---+-----------------------------------------------------+

example4:

+---+---+-----------------------------------------------------+
|123|fix|It is a integrated testtttttttttttttttttttttttttttttt|
|   |   |ttttttttttttttttttttttttttttttttttttttttttttttttttttt|
|   |   |tttttttttttttttttttttttttttttttttttttttt             |
+---+---+-----------------------------------------------------+

example5:

+---+---------------------------------------------------------+
|fix|this has not any first <td>.. then remove VN cell!       |
+---+---------------------------------------------------------+
|fix|this has not any first <td>.. then remove VN cell!       |
+---+---------------------------------------------------------+

---

Do I need to use JavaScript for implementing what I need?

解决方案

Try this property:

white-space: pre-line;

There's more values with different behavior here

这篇关于如何在固定布局表中创建可变宽度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！