Question

我的桌子中间有标题。在标题的右侧，有一个链接指向另一个页面以获取详细视图。如果我的链接文本太大，则标题中间对齐被打破，它被向左推。无论链接的位置如何，我都希望将标题保持在中间位置。这意味着，标题应该是中间对齐的。

<div class="col-xs-4">
  <table class="table">
    <caption>Table Caption<a class="detail-link">large link placed at right</a></caption>
     <thead>
        <tr>
           <th>Name</th>
           <th>City</th>
           <th>Pincode</th>
        </tr>
     </thead>
     <tbody>
        <tr>
           <td>Tanmay</td>
           <td>Bangalore</td>
           <td>560001</td>
        </tr>
        <tr>
           <td>Sachin</td>
           <td>Mumbai</td>
           <td>400003</td>
        </tr>
        <tr>
           <td>Uma</td>
           <td>Pune</td>
           <td>411027</td>
        </tr>
     </tbody>
  </table>
</div>

/* CSS used here will be applied after bootstrap.css */
.detail-link {
    float: right;
}

Answer 1

可以使用div标签和一些相对定位来完成，如下所示。

<div class="col-xs-4">
<table class="table">
<caption>Table Caption</caption>
<div style="position:relative;float:right;top:20px;"><a href="link.html">text too long</a></div>
 <thead>
    <tr>
       <th>Name</th>
       <th>City</th>
       <th>Pincode</th>
    </tr>
 </thead>
 <tbody>
    <tr>
       <td>Tanmay</td>
       <td>Bangalore</td>
       <td>560001</td>
    </tr>
    <tr>
       <td>Sachin</td>
       <td>Mumbai</td>
       <td>400003</td>
    </tr>
    <tr>
       <td>Uma</td>
       <td>Pune</td>
       <td>411027</td>
    </tr>
 </tbody>
</table>
</div>

Answer 2

将其定位为绝对符合您的要求。

.detail-link {
    position:absolute;
    right: 0;
    width: 30%;
}

Answer 3

你可以试试这个：

CSS：

    .detail-link {
   float:right;
    width:30%;

}

  span{
    position:relative;
    left:26px;

}

HTML：

<div class="col-xs-4">
  <table class="table">
    <caption><span>Table Caption</span><a class="detail-link">large links asfasf asf asdf as at right</a></caption>
     <thead>
        <tr>
           <th>Name</th>
           <th>City</th>
           <th>Pincode</th>
        </tr>
     </thead>
     <tbody>
        <tr>
           <td>Tanmay</td>
           <td>Bangalore</td>
           <td>560001</td>
        </tr>
        <tr>
           <td>Sachin</td>
           <td>Mumbai</td>
           <td>400003</td>
        </tr>
        <tr>
           <td>Uma</td>
           <td>Pune</td>
           <td>411027</td>
        </tr>
     </tbody>
  </table>
</div>
      span{position:relative;
        left:26px;   
    }

Answer 4

你可以这样做：

Table Caption也应float:right;并在您的链接后替换

<强> CSS：

/* CSS used here will be applied after bootstrap.css */
.detail-link {
    float: right;
}
span {
  float:right;
  margin-right:15px;
}

<强> HTML：

<div class="col-xs-4">
  <table class="table">
    <caption><a class="detail-link">large link placed at right</a><span>Table Caption</span></caption>
     <thead>
        <tr>
           <th>Name</th>
           <th>City</th>
           <th>Pincode</th>
        </tr>
     </thead>
     <tbody>
        <tr>
           <td>Tanmay</td>
           <td>Bangalore</td>
           <td>560001</td>
        </tr>
        <tr>
           <td>Sachin</td>
           <td>Mumbai</td>
           <td>400003</td>
        </tr>
        <tr>
           <td>Uma</td>
           <td>Pune</td>
           <td>411027</td>
        </tr>
     </tbody>
  </table>
</div>

我希望这是有帮助的

表格标题对齐

4 个答案: