Table caption alignment - html

Question

I've a table with caption centered middle. At the right side of the caption, there is a link with refers to another page for detailed view. If my link text is too large, then the caption middle alignment is broken, it is pushed left. All I want to keep the caption at the middle regardless of the placement of link. That means, caption should be middle aligned.
Problem Demo
<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

It can be done using a div tag combined with some relative positioning as seen below.
<div class="col-xs-4">
<table class="table">
<caption>Table Caption</caption>
<div style="position:relative;float:right;top:20px;">text too long</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

Positioning it as absolute will achieve your requirement.
.detail-link {
position:absolute;
right: 0;
width: 30%;
}

Answer 3

You could try this:
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

you could do:
Table Caption also should float:right; and replace to after your link
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>
i hope it's helpfull