1

我有一个 HTML 表格，其中单元格 #3 和单元格 #4 有内部表格。

我需要单元格#3 和单元格#4 中每个表中的行正确排列。

问题有时是一行文本行的长度可能超过一行，而另一个表没有这个，所以行不匹配。

由于数据来自我无法控制的数据库，我该如何纠正这种看法？

我创建了一个 jsfiddle：http: //jsfiddle.net/HPkvV/

<style>
.main
{
 border: 1px solid #000000;
}
.main td
{
 border: 1px solid #000000;
}
.grid
{
    border-left: none !important;
    border-right: none !important;
    border-top:1px solid #dddddd;
    border-bottom:1px solid #dddddd;
}
.grid td
{
    border-left: none !important;
    border-right: none !important;
    border-top:1px solid #dddddd;
    border-bottom:1px solid #dddddd;
}
</style>



<table width="400">
<tr>
    <td>
        <table width="100%" class="main">
            <td valign=top>column 1</td>
            <td valign=top>column 2</td>
            <td valign=top>column 3
                <table id="names" class="grid">
                    <tr>
                        <td>line 1</td>
                    </tr>
                    <tr>
                        <td>line 2</td>
                    </tr>
                    <tr>
                        <td>line 3</td>
                    </tr>
                </table>
            </td>
            <td valign=top>column 4
                <table id="desc" class="grid">
                    <tr>
                        <td>line 1 description is a little too long so it wraps line 1 description is a little too long so it wraps</td>
                    </tr>
                    <tr>
                        <td>line 2 description</td>
                    </tr>
                    <tr>
                        <td>line 3 description</td>
                    </tr>
                </table>
            </td>

        </table>
    </td>
</tr>
</table>
4

3 回答 3

2

您使用嵌套表是否有原因？第二组信息看起来可能包含在列表中。如果是这样的话，让一切都变得美好起来会容易得多。

风格

.main
{
 border: 1px solid #000000;
}
.main td, .main th
{
 border: 1px solid #000000;
    vertical-align: top;
}
.grid li
{
    height: 4em; /*  this is the value that will help you get them even.  Though you will be guessing, hoping that no content runs too long.*/
    border-bottom:1px solid #dddddd;
}

HTML

<table class="main">
    <thead>
        <tr><th>Column 12</th>
        <th>Column 2</th><th>Column 3</th><th>Column 4</th></tr>
    </thead>
    <tbody>                    
        <tr>
            <td>foo</td>
            <td> bar</td>
            <td>
                <ul class="grid">
                    <li>
                        line 1
                    </li>
                    <li>
                        line 2
                    </li>
                    <li>
                        line 3
                    </li>
                </ul>
            </td>
            <td>
                <ul class="grid">
                    <li>
                        line 1 description is a little too long so it wraps line 1 description is a little too long so it wraps
                    </li>
                    <li>
                        line 2 description
                    </li>
                    <li>
                        line 3 description
                    </li>
                </ul>                
            </td>
        </tr>
    </tbody>
</table>​

如果对数据有一点了解，这不是一个完整的解决方案。我也用这个解决方案更新了你的小提琴。

哎呀新小提琴http://jsfiddle.net/HPkvV/2/

于 2012-08-28T15:45:08.483 回答
0 
     <style>
  .main
 {
 border: 1px solid #000000;
 }
 .main td
  {
    border: 1px solid #000000;
  }
 .grid
 {
table-layout: fixed;
overflow: scroll;
border-left: none !important;
border-right: none !important;
border-top:1px solid #dddddd;
border-bottom:1px solid #dddddd;

}
.grid td
{

border-left: none !important;
border-right: none !important;
border-top:1px solid #dddddd;
border-bottom:1px solid #dddddd;
}
</style>



 <table width="400">
 <tr>
<td>
    <table width="100%" class="main">
    <tr>
        <td valign="top">column 1</td>
        <td valign="top">column 2</td>
        <td valign="top" style="width:25%;">column 3
            <table id="names" class="grid">
                <tr style="height:20;">
                    <td>line 1</td>
                </tr>
                <tr  style="height:20;">
                    <td>line 2</td>
                </tr>
                <tr  style="height:20;">
                    <td>line 3</td>
                </tr>
            </table>
        </td>
        <td valign="top" style="width:25%;">column 4
            <table id="desc" class="grid">
                <tr>
                    <td  ><div style="overflow-y:auto; height:20px;">line   1                 description is a little too long so it wraps line 1 description is a little too long so it wraps</div></td>
                </tr>
                <tr>
                    <td><div style="overflow-y:auto; height:20px;">line 2 description</div></td>
                </tr>
                <tr>
                    <td><div style="overflow-y:auto; height:20px;">line 3 description</div></td>
                </tr>
            </table>
        </td>
        </tr>
    </table>
   </td>
 </tr>
  </table>

对不起，它不是很优雅，但我希望它是你的原因......

于 2012-08-28T16:07:36.687 回答
0

如果您坚持使用表格（仅适用于表格数据），我强烈建议您不要嵌套它们。通过使用 rowspan 属性，您可以在没有它们的情况下完美地实现您想要的结果。您的代码将如下所示：

<table width="400" class="main">
    <tr>
        <td rowspan="4" valign=top>column 1</td>
        <td rowspan="4"valign=top>column 2</td>
        <td  valign=top>column 3</td>
        <td valign=top>column 4</td>
    </tr>
    <tr class="grid">
        <td>line 1</td>
        <td>line 1 description is a little too long so it wraps line 1 description is a little too long so it wraps</td>
    </tr>
    <tr  class="grid">
        <td>line 2</td>
        <td>line 2 description</td>
    </tr>
    <tr  class="grid">
        <td>line 3</td>
        <td>line 3 description</td>
    </tr>
</table>​

随着内容的增长，您将不得不更新 rowspan 值，但是使用一些服务器端脚本应该相当容易。

对于一个工作示例，请看这里：http: //jsfiddle.net/HPkvV/8/

（请注意，我还!important从您的 css 中删除了可怕的东西，这里不需要，应该小心使用！）

于 2012-08-28T17:31:19.163 回答