Question

在下面的HTML中，我遇到两个问题：

生成的随机字符串不适合td的15％宽度。我不确定如何将div作为其父td的最大宽度（在此屏幕宽度的15％和min-width的{{1}}）
< / LI>
我不确定提供200px的％高度，因为我希望整个表格的高度/宽度为100％（#row2比{#row1大一点1}} - 例如60/40），但我希望#row2固定在#row2的{{1}}。

height

Answer 1

也许这就是您要找的内容，请参阅demo fiddle。

问题1）

#query_div{
    overflow: hidden;
    word-break: break-all;
    height: 1em; /* I don't know if you want whis */
}

问题2）

#row2{
    height: 20px;
}

Answer 2

EDITED

我怀疑这可满足您的所有要求，但希望能让您走上正轨
在这里玩：http://jsfiddle.net/9965G/

或整个代码：

<!DOCTYPE HTML>
<html>
<head>
<script language="javascript" type="text/javascript">
  function randomString(string_length) {
    var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz";
    var randomstring = '';
    for (var i=0; i<string_length; i++) {
        var rnum = Math.floor(Math.random() * chars.length);
        randomstring += chars.substring(rnum,rnum+1);
    }
    return randomstring;
  }
  function FillData(){
    document.getElementById("query_div").innerHTML = randomString(1000);
  }
</script>

<style type="text/css">
  #global_table{
    height:100%;
    width:100%;
    max-height:1500px;
  }
  #col1{
  }
  #col2{
    min-width:200px;
    width:20%;
  }
  #col3{
    min-width:200px;
    width:25%;
  }
  #col4{
    min-width:200px;
    width:15%;
  }
  #col5{
    min-width:200px;
    width:25%;
  }
  #row1{
    height:30px;
  }
  #row2{
    height:20px;
  }
  #row3{
    /*min-height:200px;
    height:45%;*/
  }
  #left_box{
    max-width: 200px;
    width: 15%;
  }
  #query_div{
    overflow:hidden;
    word-wrap: break-word;
  }
  td {
    min-width: 200px;
  }
</style>  
</head>
<body onload="FillData()">
<table id="global_table" border="2">
  <colgroup>
    <col id="col1"/>
    <col id="col2"/>
    <col id="col3"/>
    <col id="col4"/>
    <col id="col5"/>
  </colgroup>
  <tr id="row1">
    <td id="left_box" rowspan="3"><div id="query_div">Test</div></td>
    <td><div id="box1_div">Box 1</div></td>
    <td colspan="2"><div id="box2_div">Box 2</div></td>
    <td><div id="box3_div">Box 3</div></td>
  </tr>
  <tr id="row2">
    <td rowspan="2" colspan="2"><div id="box4_div">Box 4</div></td>
    <td colspan="2"><div id="box4_div">Box 5</div></td>
  </tr>
  <tr id="row3">
    <td colspan="2"><div id="box6_div">Box 6</div></td>
  </tr>
</table>
</body>
</html>

注意：
1.我将css道具从col1移到了left_box
2.它说max-width: 200和width: 15%。然而，就好像我说min-width: 200似乎如此。我无法解释。在萤火虫中验证。我想像使用百分比和像素一起可能会导致问题......也许还有别的东西 3.如果您希望将row2修复为20px，则只需说width: 20px;即可row1/row2 = 60/40，这意味着您只需要raw1 width: 30px 。
4. row3和row1的{{1}}混乱高度。我删除了它。
我实际上对表格的经验很少......我尽量避免使用它们。是的，表格应该适用于表格数据...但是当它不那么微不足道时，祝你好运。如果需要，我会使用div和其他js来尝试优化表格。

限制表格中div的宽度和高度

2 个答案: