4

我暂时继承了照顾我们项目网站前端的责任，因为我们的网络维护人员刚刚离开并且还没有替代人员（反正我是暑期学生，所以我也很快就要离开了。 ..)。我对 HTML/CSS/etc 的经验不是很丰富，而且我在按照老板想要的方式格式化表格时遇到了一些问题。表格 HTML/CSS（尽可能地减少）如下：

<html>
 <head>
  <style type="text/css">

            /* Old CSS from web-guy before me */
  h5 { 
   font-size: 150%; 
   color: #878796;
   font-family: Arial,Helvetica,sans-serif;
  }

  .details-container {
   border-right : 1px;
   border-right-color:#F6F6F6;
   float:left;
  }

  .title-details h5 {
   text-align: center;
   margin: 0px;
   margin-bottom: 5px;
   margin-top: 5px;
  }

  /* From here on it is mostly my CSS */
  table.center {
   margin-left:auto;
   margin-right:auto;
  }

  .details-column-left{
   text-align:right;
   padding-right:2px;
  }

  .details-column-right{
   text-align:left;
   padding-left:2px;
  }

  </style>
 </head>
 <body>
  <div class="details-container">
   <div class="title-details">
     <h5>Details</h5>
   </div>

   <div class="details">
    <table class="center">
     <tr>
      <th class="details-column-left">Title</th>
      <td class="details-column-right">Prince</td>
     </tr>
     <tr>
      <th class="details-column-left">Name</th>

      <td class="details-column-right">Vlad III the Impaler</td>
     </tr>
     <tr>
      <th class="details-column-left">Nationality</th>
      <td class="details-column-right">Romanian</td>
     </tr>
     <tr>

      <th class="details-column-left">Job</th>
      <td class="details-column-right">General</td>
     </tr>
     <tr>
      <th class="details-column-left">Extremely Long Header Text</th>
      <td class="details-column-right">Equally Long Value Text</td>
     </tr>

     <tr>
      <th class="details-column-left">Header</th>
      <td class="details-column-right">Value</td>
     </tr>
    </table>
   </div>
  </div>
 </body>
</html>

表格中的文本（即标题单元格文本和标准单元格文本）是基于数据库在服务器端生成的，因此它们中的值可以很长也可以很短（具有合理的最大长度）。老板们希望它是这样的：

  • 两列必须在中间相互对齐，中间留有小空间。
  • 表格应该展开，以便每个单元格中的所有文本都在同一行上。
  • 标题（“详细信息”）应始终位于两列之间，无论宽度比如何（通常约为 60:40）。

我想我已经设法捕获了 1 和 2 好吧——如果你添加更长th/td的 s，这个表应该会扩大，如果你删除它们，它也应该会变小——但我正在努力解决数字 3。我只是不确定如何去做。我试过使用 a <caption>，但这没有帮助 - 它仍然在整个表格上方居中，而不是在列拆分上方居中。

因此，我将不胜感激任何帮助使表格看起来“正确”。唯一预期的浏览器显然是 Firefox，版本 2 到 3.5（尽管主要将 3.5 推到 2 之上）。如果我错过了任何重要信息，我深表歉意 - 请询问，我会添加它。

编辑：

屏幕截图（红线仅用于标记中心，实际上不在 IRL 表上）：

现在的桌子，也是我想要的。

4

1 回答 1

1

解决方案

它有点棘手，但你可以这样做：

<html>
<head>
    <style type="text/css">

        /* Old CSS from web-guy before me */
    h5 { 
        font-size: 150%; 
        color: #878796;
        font-family: Arial,Helvetica,sans-serif;
    }

    .details-container {
        border-right : 1px;
        border-right-color:#F6F6F6;
        float:left;
    }

    .title-details h5 {
        margin: 0px;
        margin-bottom: 5px;
        margin-top: 5px;
    }

    /* From here on it is mostly my CSS */
    table.center {
        margin-left:auto;
        margin-right:auto;
    }

    .details-column-left{
        text-align:right;
        padding-right:2px;
    }

    .details-column-right{
        text-align:left;
        padding-left:2px;
    }

    </style>
</head>
<body>
    <div class="details-container">

        <div class="details">
            <table class="center">
                <tr><td>&nbsp;</td><td><div style="width: 1px;overflow:visible;text-align: center;margin: -40px;"><h5>Details</h5></div></td><td>&nbsp;</td></tr>
                <tr>
                    <th class="details-column-left">Title</th>
                    <td width="1">&nbsp;</td>
                    <td class="details-column-right">Prince</td>
                </tr>
                <tr>
                    <th class="details-column-left">Name</th>
                    <td>&nbsp;</td>
                    <td class="details-column-right">Vlad III the Impaler</td>
                </tr>
                <tr>
                    <th class="details-column-left">Nationality</th>
                    <td>&nbsp;</td>
                    <td class="details-column-right">Romanian</td>
                </tr>
                <tr>

                    <th class="details-column-left">Job</th>
                    <td>&nbsp;</td>
                    <td class="details-column-right">General</td>
                </tr>
                <tr>
                    <th class="details-column-left">Extremely Long Header Text</th>
                    <td>&nbsp;</td>
                    <td class="details-column-right">Equally Long Value Text</td>
                </tr>

                <tr>
                    <th class="details-column-left">Header</th>
                    <td>&nbsp;</td>
                    <td class="details-column-right">Value</td>
                </tr>
            </table>
        </div>
    </div>
</body>

它的，不是很干净整洁，但它应该工作得很好

问候

于 2010-08-23T09:57:38.110 回答