【问题标题】:equal border height for all columns in a table表中所有列的边框高度相等
【发布时间】:2012-12-07 15:48:24
【问题描述】:

我在一行中有 3 列

我需要在正确的商品描述和每个包裹的净数量中间的这个边界延伸到平行列(标记和包裹数量)边界高度

【问题讨论】:

标签: html css html-table


【解决方案1】:

曾经 table height:100%;

table{
height:100%;
}

Demo

【讨论】:

  • ya..它现在可以工作了...但是在打印中我变得像这样..使用 table{ height:100%;我越来越像这样.....jsfiddle.net/6XsKj/8
  • 用于 td{vertical-align:top;} 在您的 css 文件中
  • 我在打印方面还是一样...你能纠正我吗
  • 如果我像你说的那样使用我的输出为 ....jsfiddle.net/6XsKj/8 ..但我需要输出为jsfiddle.net/6XsKj/12 ...请澄清一下
  • 我有一个带有行和列的动态页面...如果我使用这个高度:100%" ..它的工作列边框延伸到平行列边框高度...但我是像这样在每行之间获取空格jsfiddle.net/6XsKj/8 ...你能帮我吗
【解决方案2】:

你必须使用这样的结构:

<table>

    <tr>
        <td>Marks</td>
        <td>Description</td>
        <td>Quantity</td>
    </tr>

    <tr>
        <td>Lorem...</td>
        <td>Lorem...</td>
        <td>Sit...</td>
    </tr>

    <tr>
        <td>Name and Address</td>
        <td colspan='2'>Signature and date</td>
    </tr>

</table>

查看第三行第二个单元格的属性colspan

【讨论】:

    【解决方案3】:

    首先将样式 height:100% 放在包含 &lt;table&gt;&lt;td&gt;

        <td width="63%" rowspan="2" valign="top" 
    style="border-right:1px solid black; border-top:1px solid black; border-bottom:1px solid black;font-size:18px;height:100%">
    

    然后,将样式height:inherit 放在&lt;table&gt; 上,在&lt;td&gt; 下作为

       <table width="100%" border="0" cellspacing="0" cellpadding="0" 
    style="height:inherit">
    

    【讨论】:

    • 如果我像你说的那样使用我的输出为 ....jsfiddle.net/6XsKj/8 ..但我需要输出为jsfiddle.net/6XsKj/12 ...请澄清一下
    • 我有一个带有行和列的动态页面...如果我使用这个高度:100%" 和 style="height:inherit"..它的工作列边框延伸到平行列边框高度...但是我在每行之间都有空格,就像这样jsfiddle.net/6XsKj/8 ...你能帮帮我吗
    • 当我检查小提琴时,没有我发布的样式。行之间的空间是因为许多&lt;br&gt; 标签。检查此Fiddle。这将运作良好。我还包括 vertical-align:top 以更正输出。
    • 我正在使用该中断向您展示我如何在我的动态网页中获得输出。jsfiddle.net/6XsKj/18 请检查这个小提琴..我正在使用你所说的..我正在获取值response.write 的两列中的...你能纠正我吗
    • 所以现在我认为问题在于“文本的中间对齐”。使对齐垂直(我之前给出了链接)。还有其他问题吗?
    【解决方案4】:

    无需在代码中引入 Second Table

    Check Fiddle
    

    http://jsfiddle.net/6XsKj/7/

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2012-05-21
      • 2019-06-04
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2012-08-27
      相关资源
      最近更新 更多