Question

我暂时继承了负责管理网站前端到我们项目的责任，因为我们的网络维护人员刚刚离开而且还没有替换（我还是一名暑期学生，所以我不在很快...）。我对HTML / CSS /等不是很有经验，而且我遇到一些问题，就像老板喜欢它一样格式化表格。表格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号我根本不确定怎么做。我尝试过使用<caption>，但这并没有帮助 - 它仍然位于整个表格的中心，而不是在列分割之上的中心。

所以，我很感激帮助让桌子看起来'正确'。唯一预期的浏览器显然是Firefox，版本2到3.5（虽然主要推动3.5超过2）。如果我错过了任何重要信息，我会道歉 - 请问我，我会加上它。

修改

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

The Table as it is now, and as I want it.

Answer 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>

它不是真的干净整洁，但它应该可以正常运行

格尔茨

获取以2列表为中心的标题/标题

1 个答案: