How to fix the bootstrap-table header? - css

I've data inside a bootstrap table. As the rows increases, the header will be out of sight on vertical scroll. So I need to fix the header of the bootstrap table with table body vertical scrollable. Also,the horizontal scroll for the whole table when columns exceed in the page.
Reference implementation without bootstrap.This is implemented by using two tables. One for header and the other for body.
I've the following data which is similar to my original data.
NOTE:I am not using any col-*-* for table's td. Because my header columns are more than 12. And may increase up to 15. So I don't use the column classes.
HTML
<tbody>
<tr>
<th style="cursor: pointer;">
ABCD
</th>
<th style="cursor: pointer;">
Asadh uysdsgh
</th>
<th style="cursor: pointer;">
ghdsgsh sdfsdjsd
</th>
<th style="cursor: pointer;">
sdagfh sdhfsjk
</th>
<th style="cursor: pointer;">
sdhfasgh sdjkj
</th>
<th style="display: none; cursor: pointer;">
shadfj sjdskdl
</th>
<th style="cursor: pointer;">
sddgjgfhgshdf skldj
</th>
<th style="cursor: pointer;">
sdfsffsd sdfsd
</th>
<th style="cursor: pointer;">
sdfsd sdfsd
</th>
<th style="cursor: pointer;">
fhgdd sdg sfs fsfsffsd sdfffs
</th>
<th style="cursor: pointer;">
fsdfsd dvf ffff
</th>
<th style="cursor: pointer;">
fsdfsd dvf ffff
</th>
<th style="cursor: pointer;">
sfgasad sdfjhjshj
</th>
<th style="cursor: pointer;"></th>
</tr>
<tr>
<td>
579852
</td>
<td>
21June_The hhjhj bhjhhkj
</td>
<td>
US jhgg
</td>
<td>
sdafss
</td>
<td>
sdfsdfssd
</td>
<td style="display: none;">
No
</td>
<td>
sfdf ,sdffssd,sdfhshdj,
</td>
<td>
Acsadfds
</td>
<td>
06/30/2016
</td>
<td>
0
</td>
<td>
sfasd
</td>
<td>
06/30/2016
</td>
<td>
sdasd
</td>
<td>
<a target="_blank" class="linkth">Preview </a>
</td>
</tr>
<tr>
<td>
579850
</td>
<td>
sdfff sdfabsd sjd </td>
<td>
US asdfd
</td>
<td>
sdfsdsdsd
</td>
<td>
sdfsfdfas
</td>
<td style="display: none;">
No
</td>
<td>
sdhafasdjfj sdhfasdsf,
</td>
<td>
sdfsdsda
</td>
<td>
06/30/2016
</td>
<td>
0
</td>
<td>
sdhafasdjfj sdhfasdsf
</td>
<td>
07/04/2016
</td>
<td>
sdhafasdjfj sdhfasdsf
</td>
<td>
<a target="_blank" class="linkth">Preview </a>
</td>
</tr>
<tr>
<td>
579893
</td>
<td>
sdhafasdjfj sdhfasdsf sdfha sdfsfh
</td>
<td>
US sdfsdfgl
</td>
<td>
dfsjsdsd
</td>
<td>
sdfdfjk
</td>
<td style="display: none;">
No
</td>
<td>
sdhafasdjfj sdhfasdsf
</td>
<td>
sdfgagf
</td>
<td>
06/30/2016
</td>
<td>
0
</td>
<td>
sdhafasdjfj sdhfasdsf
</td>
<td>
06/28/2016
</td>
<td>
sdhafasdjfj sdhfasdsf
</td>
<td>
<a target="_blank" class="linkth">Preview </a>
</td>
</tr>
<tr>
<td>
545554
</td>
<td>
jhsdfg sdfhh sdafjh
</td>
<td>
US sdfhhdf
</td>
<td>
sdfadilgf
</td>
<td>
tadil
</td>
<td style="display: none;">
No
</td>
<td>
sdhafasdjfj sdhfasdsf
</td>
<td>
tadil
</td>
<td>
08/08/2003
</td>
<td>
0
</td>
<td>
sdhafasdjfj sdhfasdsf
</td>
<td>
06/29/2016
</td>
<td>
sdhafasdjfj sdhfasdsf
</td>
<td>
<a target="_blank" class="linkth">Preview </a>
</td>
</tr>
<tr>
<td>
579892
</td>
<td>
sadfs asdfhds dbsh dfsdh
</td>
<td>
US tadil
</td>
<td>
sddftadil
</td>
<td>
fftadil
</td>
<td style="display: none;">
No
</td>
<td>
sdhafasdjfj sdhfasdsf
</td>
<td>
Active
</td>
<td>
06/30/2016
</td>
<td>
0
</td>
<td>
tadil fsddf
</td>
<td>
06/29/2016
</td>
<td>
sdhafasdjfj sdhfasdsf
</td>
<td>
<a target="_blank" class="linkth">Preview </a>
</td>
</tr>
<tr>
<td>
579855
</td>
<td>
jsdhfsdfb dfs bsdhfdjs bsdhbh
</td>
<td>
US tadil
</td>
<td>
sdftadil
</td>
<td>
fjtadil
</td>
<td style="display: none;">
No
</td>
<td>
sdhafasdjfj sdhfasdsf
</td>
<td>
tadil
</td>
<td>
06/30/2016
</td>
<td>
0
</td>
<td>
</td>
<td>
06/21/2016
</td>
<td>
</td>
<td>
<a target="_blank" class="linkth">Preview </a>
</td>
</tr>
<tr>
<td>
579851
</td>
<td>
asdhshj- jd dsjsh jjsd
</td>
<td>
US tadil
</td>
<td>
tadil
</td>
<td>
Retail
</td>
<td style="display: none;">
No
</td>
<td>
sdhafasdjfj sdhfasdsf
</td>
<td>
tadil
</td>
<td>
06/30/2016
</td>
<td>
0
</td>
<td>
sdhafasdjfj sdhfasdsf
</td>
<td>
06/29/2016
</td>
<td>
sdhafasdjfj sdhfasdsf
</td>
<td>
<a target="_blank" class="linkth">Preview </a>
</td>
</tr>
<tr>
<td>
579842
</td>
<td>
Test sdhfhad bsdbh
</td>
<td>
US English
</td>
<td>
Internal
</td>
<td>
tadil
</td>
<td style="display: none;">
No
</td>
<td>
sdfffa ,dsjfjs,
</td>
<td>
Active
</td>
<td>
06/30/2016
</td>
<td>
0
</td>
<td>
sdafsfsd
</td>
<td>
07/01/2016
</td>
<td>
asdff
</td>
<td>
<a target="_blank" class="linkth">Preview </a>
</td>
</tr>
</tbody>
</table>
</div>
Fiddle
Fiddle by using the provided link of the original question.
Just look at the above fiddle, when there are more headers,table gets distorted.

Related

Bootstrap fixed nested table header on scroll

Since other provided solutions (also I want to avoid jQuery like this solution: stackoverflow) to this topic are not working for my case, I opened a new question. How can I make the table header fixed on vertical scroll?
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class=container>
<div class=row>
<div class=col-sm-12>
<div class="table-responsive">
<table class="table table-condensed table-bordered table-hover fixed_headers">
<thead>
<tr>
<th rowspan="2" style="width: 10px"><span class="text-muted">#</span></th>
<th rowspan="2">ID</th>
<th rowspan="2">Name</th>
<th colspan="4">r 1</th>
<th colspan="4">r 2</th>
<th rowspan="2" ng-click="sortTableBy('recognized')" class="change-sort-order">ERK
</th>
<th rowspan="2">ERW
</th>
<th rowspan="2"><span class="text-muted">Radar</span></th>
<th rowspan="2"><span class="text-muted">RISS</span></th>
</tr>
<tr>
<th>
A 1
</th>
<th>
A 2
</th>
<th>
A 3
</th>
<th>
A 4
</th>
<th>
A 1
</th>
<th>
A 2
</th>
<th>
A 3
</th>
<th>
A 4
</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="text-muted">1</span></td>
<td>ididid</td>
<td>name</td>
<td>
aaa
</td>
<td>
bbb
</td>
<td>
ccc
</td>
<td>
ddd
</td>
<td>
ee </td>
<td>
ffubfhiuwefuh
</td>
<td>
dd
</td>
<td>
gg </td>
<td>gg
</td>
<td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center">
</td>
<td>
<button type="button" class="btn btn-default btn-xs center-block">Show
</button>
</td>
<td>
</td>
</tr>
<tr>
<td><span class="text-muted">1</span></td>
<td>ididid</td>
<td>name</td>
<td>
aaa
</td>
<td>
bbb
</td>
<td>
ccc
</td>
<td>
ddd
</td>
<td>
ee </td>
<td>
ff
</td>
<td>
dd
</td>
<td>
gg </td>
<td>gg
</td>
<td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center">
</td>
<td>
<button type="button" class="btn btn-default btn-xs center-block">Show
</button>
</td>
<td>
</td>
</tr>
<tr>
<td><span class="text-muted">1</span></td>
<td>ididid</td>
<td>name</td>
<td>
aaa
</td>
<td>
bbb
</td>
<td>
ccc
</td>
<td>
ddd
</td>
<td>
ee </td>
<td>
ff
</td>
<td>
dd
</td>
<td>
gg </td>
<td>gg
</td>
<td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center">
</td>
<td>
<button type="button" class="btn btn-default btn-xs center-block">Show
</button>
</td>
<td>
</td>
</tr>
<tr>
<td><span class="text-muted">1</span></td>
<td>ididid</td>
<td>name</td>
<td>
aaa
</td>
<td>
bbbjiodeijoew
</td>
<td>
ccc
</td>
<td>
ddd
</td>
<td>
ee </td>
<td>
ff
</td>
<td>
dd
</td>
<td>
gg </td>
<td>gg
</td>
<td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center">
</td>
<td>
<button type="button" class="btn btn-default btn-xs center-block">Show
</button>
</td>
<td>
</td>
</tr>
<tr>
<td><span class="text-muted">1</span></td>
<td>ididid</td>
<td>name</td>
<td>
aaa
</td>
<td>
bbb
</td>
<td>
ccc
</td>
<td>
ddd
</td>
<td>
ee </td>
<td>
ff
</td>
<td>
dd
</td>
<td>
gg </td>
<td>gg
</td>
<td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center">
</td>
<td>
<button type="button" class="btn btn-default btn-xs center-block">Show
</button>
</td>
<td>
</td>
</tr>
<tr>
<td><span class="text-muted">1</span></td>
<td>ididid</td>
<td>name</td>
<td>
aaa
</td>
<td>
bbb
</td>
<td>
ccc
</td>
<td>
ddd
</td>
<td>
ee </td>
<td>
ff
</td>
<td>
dd
</td>
<td>
gg </td>
<td>gg
</td>
<td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center">
</td>
<td>
<button type="button" class="btn btn-default btn-xs center-block">Show
</button>
</td>
<td>
</td>
</tr>
<tr>
<td><span class="text-muted">1</span></td>
<td>ididid</td>
<td>name</td>
<td>
aaa
</td>
<td>
bbb
</td>
<td>
ccc
</td>
<td>
ddd
</td>
<td>
ee </td>
<td>
ff
</td>
<td>
dd
</td>
<td>
gg </td>
<td>gg
</td>
<td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center">
</td>
<td>
<button type="button" class="btn btn-default btn-xs center-block">Show
</button>
</td>
<td>
</td>
</tr>
<tr>
<td><span class="text-muted">1</span></td>
<td>ididid</td>
<td>name</td>
<td>
aaa
</td>
<td>
bbb
</td>
<td>
ccc
</td>
<td>
ddd
</td>
<td>
ee </td>
<td>
ff
</td>
<td>
dd
</td>
<td>
gg </td>
<td>gg
</td>
<td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center">
</td>
<td>
<button type="button" class="btn btn-default btn-xs center-block">Show
</button>
</td>
<td>
</td>
</tr>
<tr>
<td><span class="text-muted">1</span></td>
<td>ididid</td>
<td>name</td>
<td>
aaa
</td>
<td>
bbb
</td>
<td>
ccc
</td>
<td>
ddd
</td>
<td>
ee </td>
<td>
ff
</td>
<td>
dd
</td>
<td>
gg </td>
<td>gg
</td>
<td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center">
</td>
<td>
<button type="button" class="btn btn-default btn-xs center-block">Show
</button>
</td>
<td>
</td>
</tr>
<tr>
<td><span class="text-muted">1</span></td>
<td>ididid</td>
<td>name</td>
<td>
aaa
</td>
<td>
bbb
</td>
<td>
ccc
</td>
<td>
ddd
</td>
<td>
ee </td>
<td>
ff
</td>
<td>
dd
</td>
<td>
gg </td>
<td>gg
</td>
<td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center">
</td>
<td>
<button type="button" class="btn btn-default btn-xs center-block">Show
</button>
</td>
<td>
</td>
</tr>
<tr>
<td><span class="text-muted">1</span></td>
<td>ididid</td>
<td>name</td>
<td>
aaa
</td>
<td>
bbb
</td>
<td>
ccc
</td>
<td>
ddd
</td>
<td>
ee </td>
<td>
ff
</td>
<td>
dd
</td>
<td>
gg </td>
<td>gg
</td>
<td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center">
</td>
<td>
<button type="button" class="btn btn-default btn-xs center-block">Show
</button>
</td>
<td>
</td>
</tr>
<tr>
<td><span class="text-muted">1</span></td>
<td>ididid</td>
<td>name</td>
<td>
aaa
</td>
<td>
bbb
</td>
<td>
ccc
</td>
<td>
ddd
</td>
<td>
ee </td>
<td>
ff
</td>
<td>
dd
</td>
<td>
gg </td>
<td>gg
</td>
<td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center">
</td>
<td>
<button type="button" class="btn btn-default btn-xs center-block">Show
</button>
</td>
<td>
</td>
</tr>
<tr>
<td><span class="text-muted">1</span></td>
<td>ididid</td>
<td>name</td>
<td>
aaa
</td>
<td>
bbb
</td>
<td>
ccc
</td>
<td>
ddd
</td>
<td>
ee </td>
<td>
ff
</td>
<td>
dd
</td>
<td>
gg </td>
<td>gg
</td>
<td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center">
</td>
<td>
<button type="button" class="btn btn-default btn-xs center-block">Show
</button>
</td>
<td>
</td>
</tr>
<tr>
<td><span class="text-muted">100</span></td>
<td>ididid</td>
<td>name</td>
<td>
aaa
</td>
<td>
bbb
</td>
<td>
ccc
</td>
<td>
ddd
</td>
<td>
ee </td>
<td>
ff
</td>
<td>
dd
</td>
<td>
gg </td>
<td>gg
</td>
<td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center">
</td>
<td>
<button type="button" class="btn btn-default btn-xs center-block">Show
</button>
</td>
<td>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
$(function () {
var $window = $(window);
var $table = $('table');
var $head = $table.find('thead');
var $body = $table.find('tbody');
var $headTds1 = $head.find('tr').eq(0).find('th');
var $headTds2 = $head.find('tr').eq(1).find('th');
var $bodyTds = $body.find('tr').eq(0).find('td');
var tableWidth = $table.outerWidth();
var $tableNew = $('<table/>');
var cl = 0; // colspan total length
var cc = 0; // colspan count
$table.css({width: tableWidth});
$tableNew
.attr("class", $table.attr("class"))
.css({width: tableWidth});
$head.css({background: '#fff'});
$.each($headTds1, function (index, value) {
var $headTd = $(value);
var colspan = $headTd.attr('colspan') || 0;
if (colspan) {
while (colspan) {
addwidth($($headTds2[cl]), $($bodyTds[index+cl-cc]));
colspan--
cl++
}
cc ++;
} else {
addwidth($headTd, $($bodyTds[index+cl-cc]));
}
});
function addwidth($headTd, $bodyTd) {
var headTdwidth2 = $headTd.outerWidth();
var bodyTdwidth2 = $bodyTd.outerWidth();
var width2 = headTdwidth2 > bodyTdwidth2 ? headTdwidth2 : bodyTdwidth2;
$bodyTd.css({'width': width2});
$headTd.css({'width': width2});
var headTdwidth = $headTd.width();
var bodyTdwidth = $bodyTd.width();
var width = headTdwidth > bodyTdwidth ? headTdwidth : bodyTdwidth;
$bodyTd.html('<div style="width: ' + width + 'px">' + $bodyTd.html() + '</div>');
$headTd.html('<div style="width: ' + width + 'px">' + $headTd.html() + '</div>');
}
$head.appendTo($tableNew);
$tableNew.insertBefore($table);
$table.css({'margin-top': $tableNew.height()});
$tableNew.css({position: 'fixed'});
$window.scroll(reLeft);
$window.resize(reLeft);
function reLeft() {
$tableNew.css({left: $table.offset().left - $window.scrollLeft()});
}
});
body{
overflow-x: auto;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<table class="table table-condensed table-bordered table-hover fixed_headers">
<thead>
<tr>
<th rowspan="2" style="width: 10px"><span class="text-muted">#</span></th>
<th rowspan="2">ID</th>
<th rowspan="2">Name</th>
<th colspan="4">r 1</th>
<th colspan="4">r 2</th>
<th rowspan="2" ng-click="sortTableBy('recognized')" class="change-sort-order">ERK
</th>
<th rowspan="2">ERW
</th>
<th rowspan="2"><span class="text-muted">Radar</span></th>
<th rowspan="2"><span class="text-muted">RISS</span></th>
</tr>
<tr>
<th>
A 1
</th>
<th>
A 2
</th>
<th>
A 3
</th>
<th>
A 4
</th>
<th>
A 1
</th>
<th>
A 2
</th>
<th>
A 3
</th>
<th>
A 4
</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="text-muted">1</span></td>
<td>ididid</td>
<td>name</td>
<td>
aaa
</td>
<td>
bbb
</td>
<td>
ccc
</td>
<td>
ddd
</td>
<td>
ee
</td>
<td>
ffubfhiuwefuh
</td>
<td>
dd
</td>
<td>
gg
</td>
<td>gg
</td>
<td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center">
</td>
<td>
<button type="button" class="btn btn-default btn-xs center-block">Show
</button>
</td>
<td>
</td>
</tr>
<tr>
<td><span class="text-muted">1</span></td>
<td>ididid</td>
<td>name</td>
<td>
aaa
</td>
<td>
bbb
</td>
<td>
ccc
</td>
<td>
ddd
</td>
<td>
ee
</td>
<td>
ff
</td>
<td>
dd
</td>
<td>
gg
</td>
<td>gg
</td>
<td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center">
</td>
<td>
<button type="button" class="btn btn-default btn-xs center-block">Show
</button>
</td>
<td>
</td>
</tr>
<tr>
<td><span class="text-muted">1</span></td>
<td>ididid</td>
<td>name</td>
<td>
aaa
</td>
<td>
bbb
</td>
<td>
ccc
</td>
<td>
ddd
</td>
<td>
ee
</td>
<td>
ff
</td>
<td>
dd
</td>
<td>
gg
</td>
<td>gg
</td>
<td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center">
</td>
<td>
<button type="button" class="btn btn-default btn-xs center-block">Show
</button>
</td>
<td>
</td>
</tr>
<tr>
<td><span class="text-muted">1</span></td>
<td>ididid</td>
<td>name</td>
<td>
aaa
</td>
<td>
bbbjiodeijoew
</td>
<td>
ccc
</td>
<td>
ddd
</td>
<td>
ee
</td>
<td>
ff
</td>
<td>
dd
</td>
<td>
gg
</td>
<td>gg
</td>
<td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center">
</td>
<td>
<button type="button" class="btn btn-default btn-xs center-block">Show
</button>
</td>
<td>
</td>
</tr>
<tr>
<td><span class="text-muted">1</span></td>
<td>ididid</td>
<td>name</td>
<td>
aaa
</td>
<td>
bbb
</td>
<td>
ccc
</td>
<td>
ddd
</td>
<td>
ee
</td>
<td>
ff
</td>
<td>
dd
</td>
<td>
gg
</td>
<td>gg
</td>
<td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center">
</td>
<td>
<button type="button" class="btn btn-default btn-xs center-block">Show
</button>
</td>
<td>
</td>
</tr>
<tr>
<td><span class="text-muted">1</span></td>
<td>ididid</td>
<td>name</td>
<td>
aaa
</td>
<td>
bbb
</td>
<td>
ccc
</td>
<td>
ddd
</td>
<td>
ee
</td>
<td>
ff
</td>
<td>
dd
</td>
<td>
gg
</td>
<td>gg
</td>
<td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center">
</td>
<td>
<button type="button" class="btn btn-default btn-xs center-block">Show
</button>
</td>
<td>
</td>
</tr>
<tr>
<td><span class="text-muted">1</span></td>
<td>ididid</td>
<td>name</td>
<td>
aaa
</td>
<td>
bbb
</td>
<td>
ccc
</td>
<td>
ddd
</td>
<td>
ee
</td>
<td>
ff
</td>
<td>
dd
</td>
<td>
gg
</td>
<td>gg
</td>
<td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center">
</td>
<td>
<button type="button" class="btn btn-default btn-xs center-block">Show
</button>
</td>
<td>
</td>
</tr>
<tr>
<td><span class="text-muted">1</span></td>
<td>ididid</td>
<td>name</td>
<td>
aaa
</td>
<td>
bbb
</td>
<td>
ccc
</td>
<td>
ddd
</td>
<td>
ee
</td>
<td>
ff
</td>
<td>
dd
</td>
<td>
gg
</td>
<td>gg
</td>
<td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center">
</td>
<td>
<button type="button" class="btn btn-default btn-xs center-block">Show
</button>
</td>
<td>
</td>
</tr>
<tr>
<td><span class="text-muted">1</span></td>
<td>ididid</td>
<td>name</td>
<td>
aaa
</td>
<td>
bbb
</td>
<td>
ccc
</td>
<td>
ddd
</td>
<td>
ee
</td>
<td>
ff
</td>
<td>
dd
</td>
<td>
gg
</td>
<td>gg
</td>
<td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center">
</td>
<td>
<button type="button" class="btn btn-default btn-xs center-block">Show
</button>
</td>
<td>
</td>
</tr>
<tr>
<td><span class="text-muted">1</span></td>
<td>ididid</td>
<td>name</td>
<td>
aaa
</td>
<td>
bbb
</td>
<td>
ccc
</td>
<td>
ddd
</td>
<td>
ee
</td>
<td>
ff
</td>
<td>
dd
</td>
<td>
gg
</td>
<td>gg
</td>
<td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center">
</td>
<td>
<button type="button" class="btn btn-default btn-xs center-block">Show
</button>
</td>
<td>
</td>
</tr>
<tr>
<td><span class="text-muted">1</span></td>
<td>ididid</td>
<td>name</td>
<td>
aaa
</td>
<td>
bbb
</td>
<td>
ccc
</td>
<td>
ddd
</td>
<td>
ee
</td>
<td>
ff
</td>
<td>
dd
</td>
<td>
gg
</td>
<td>gg
</td>
<td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center">
</td>
<td>
<button type="button" class="btn btn-default btn-xs center-block">Show
</button>
</td>
<td>
</td>
</tr>
<tr>
<td><span class="text-muted">1</span></td>
<td>ididid</td>
<td>name</td>
<td>
aaa
</td>
<td>
bbb
</td>
<td>
ccc
</td>
<td>
ddd
</td>
<td>
ee
</td>
<td>
ff
</td>
<td>
dd
</td>
<td>
gg
</td>
<td>gg
</td>
<td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center">
</td>
<td>
<button type="button" class="btn btn-default btn-xs center-block">Show
</button>
</td>
<td>
</td>
</tr>
<tr>
<td><span class="text-muted">1</span></td>
<td>ididid</td>
<td>name</td>
<td>
aaa
</td>
<td>
bbb
</td>
<td>
ccc
</td>
<td>
ddd
</td>
<td>
ee
</td>
<td>
ff
</td>
<td>
dd
</td>
<td>
gg
</td>
<td>gg
</td>
<td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center">
</td>
<td>
<button type="button" class="btn btn-default btn-xs center-block">Show
</button>
</td>
<td>
</td>
</tr>
<tr>
<td><span class="text-muted">100</span></td>
<td>ididid</td>
<td>name</td>
<td>
aaa
</td>
<td>
bbb
</td>
<td>
ccc
</td>
<td>
ddd
</td>
<td>
ee
</td>
<td>
ff
</td>
<td>
dd
</td>
<td>
gg
</td>
<td>gg
</td>
<td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center">
</td>
<td>
<button type="button" class="btn btn-default btn-xs center-block">Show
</button>
</td>
<td>
</td>
</tr>
</tbody>
</table>
</div>
You can get it with the help of css itself, You can add the following in your css,
thead {
display: table;
width: calc( 100% - 1em );
table-layout: fixed;
}
tbody {
display: block;
height: 240px;
overflow: auto;
}
If you don't wish to give the styles to thead and tbody , You can also give a class to it and then you can use the above css code..
Here is the jsfiddle link that works as per your requirement,
https://jsfiddle.net/t0vek036/
You could use the CSS attribute position: fixed;.
I added it to the table <thead> inline. Do keep in mind it is better to use a seperate stylesheet. Next to that you'll have to do some style fixing over the header of the table so that it connects to the table <tbody> in the correct way. I would like to help you with it if you want to.
Look at the JSfiddle
Since the body was too long i had to put it in a seperate JSfiddle. Just copy and paste the code.
Hope this helps!
You can put your table in a vertical scrolling text area using following methods:
Method 1
<style>
.divScroll{
white-space: nowrap;
overflow-y: scroll;
font-size:14px;
height:200px;
width:auto;
background-color:#bdbdbd;
}
</style>
<div class="divScroll">
"INSERT TABLE HERE"
</div>
Method 2
<div style="border: 1px solid black; overflow-y: auto; white-space: nowrap; height: 200px; width: auto; color: black; background-color: white;">
"INSERT TABLE HERE"
</div>
I believes you are asking about vertical scrolling of entire table...

Bootstrap table with certain rows different widths

I have a table:
<table class="table table-bordered">
<tr>
<th class="text-center" colspan="3">
DRUG INFO
</th>
</tr>
<tr>
<td class="col-md-4"><span>{{item.fields[18].displayName}}</span></td>
<td class="col-md-3"><span>{{item.fields[25].displayName}}</span></td>
<td class="col-md-5"><span>{{item.fields[14].displayName}}</span></td>
</tr>
<tr>
<td>
<div data-strat-form-control data-field-display-id="1" data-vmformreadonly="formReadOnly" data-show-tool-tip="showToolTip(item.fields[19].htmlName)" data-strat-model="item" data-field="item.fields[18]"></div>
</td>
<td>
<div data-strat-form-control data-field-display-id="1" data-vmformreadonly="formReadOnly" data-show-tool-tip="showToolTip(item.fields[26].htmlName)" data-strat-model="item" data-field="item.fields[25]"></div>
</td>
<td>
<div data-strat-form-control data-field-display-id="1" data-vmformreadonly="formReadOnly" data-show-tool-tip="showToolTip(item.fields[15].htmlName)" data-strat-model="item" data-field="item.fields[14]"></div>
</td>
<tr>
<td colspan="1">UD_UU_PKG</td>
<td></td>
<td colspan="1">SHORT_CYCL</td>
</tr>
<tr>
<td>
<div data-strat-form-control data-field-display-id="1" data-vmformreadonly="formReadOnly" data-show-tool-tip="showToolTip(item.fields[52].htmlName)" data-strat-model="item" data-field="item.fields[52]"></div>
</td>
<td>
</td>
<td>
<div data-strat-form-control data-field-display-id="20" data-vmformreadonly="formReadOnly" data-show-tool-tip="showToolTip(item.fields[53].htmlName)" data-strat-model="item" data-field="item.fields[53]"></div>
</td>
</tr>
</tr>
</table>
Currently it looks like this:
I am trying to figure out how to make the middle cell on the bottom 2 rows go away so that the 2 fields will be equal in size (50/50). I have tried a ton of html properties (width, colspan etc) as well as trying to manipulate the columns with bootstrap (class="col-md-6").
What am I doing wrong and how do I fix it?
EDIT: This is what I get with Banzay's recommendations:
You need to plan the table that contains of 4 cells in each row, than set colspan respectively.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-bordered">
<tr>
<th class="text-center" colspan="4">
DRUG INFO
</th>
</tr>
<tr>
<td class="col-md-4"><span>{{item.fields[18].displayName}}</span></td>
<td class="col-md-3" colspan="2"><span>{{item.fields[25].displayName}}</span></td>
<td class="col-md-5"><span>{{item.fields[14].displayName}}</span></td>
</tr>
<tr>
<td>
<div data-strat-form-control data-field-display-id="1" data-vmformreadonly="formReadOnly" data-show-tool-tip="showToolTip(item.fields[19].htmlName)" data-strat-model="item" data-field="item.fields[18]"></div>
</td>
<td colspan="2">
<div data-strat-form-control data-field-display-id="1" data-vmformreadonly="formReadOnly" data-show-tool-tip="showToolTip(item.fields[26].htmlName)" data-strat-model="item" data-field="item.fields[25]"></div>
</td>
<td>
<div data-strat-form-control data-field-display-id="1" data-vmformreadonly="formReadOnly" data-show-tool-tip="showToolTip(item.fields[15].htmlName)" data-strat-model="item" data-field="item.fields[14]"></div>
</td>
<tr>
<td colspan="2">UD_UU_PKG</td>
<td colspan="2">SHORT_CYCL</td>
</tr>
<tr>
<td colspan="2">
<div data-strat-form-control data-field-display-id="1" data-vmformreadonly="formReadOnly" data-show-tool-tip="showToolTip(item.fields[52].htmlName)" data-strat-model="item" data-field="item.fields[52]"></div>
</td>
<td colspan="2">
<div data-strat-form-control data-field-display-id="20" data-vmformreadonly="formReadOnly" data-show-tool-tip="showToolTip(item.fields[53].htmlName)" data-strat-model="item" data-field="item.fields[53]"></div>
</td>
</tr>
</table>
Just play with colspans:
<table>
<tr>
<th colspan="6">
DRUG INFO
</th>
</tr>
<tr>
<td colspan="2">Effective date</td>
<td colspan="2">Minimum order</td>
<td colspan="2">Total package</td>
</tr>
<tr>
<td colspan="2">
<input type="text">
</td>
<td colspan="2">
<input type="text">
</td>
<td colspan="2">
<input type="text">
</td>
<tr>
<td colspan="3">UD_UU_PKG</td>
<td colspan="3">SHORT_CYCL</td>
</tr>
<tr>
<td colspan="3">
<input type="text">
</td>
<td colspan="3">
<input type="checkbox">
</td>
</tr>
</table>
And don't use "col-*-*" classes with table columns. They are designed to build responsive grids.

How to get from an HTML table the number of the rows having a disabled radio button with R?

I'm scraping a webpage with R. I use the "RSelenium" and "XML" packages. The following table has a radio button in some rows. I need to know which rows (for instance the first and the third row) have a radio button disabled so as to skip the row during the scraping. Which is the best way to do that? I cant' figure out how to easily get the number of the rows with the disabled inputs.
<table cellspacing="1" cellpadding="0" border="0" width="100%" id="table1">
<tbody><tr>
<td width="36"> </td>
<td width="100"><b>Matricola Inps</b></td>
<td width="150"><b>Denominazione</b></td>
<td width="100"><b>Stato Adesione</b></td>
<td width="120"><b>Note</b></td>
</tr>
<tr>
<td align="center" width="36">
<input type="radio" disabled="" id="sistema" name="unitaId" value="XXX">
</td>
<td><font color="#C0C0C0">
N/D
</font>
</td>
<td>
<font color="#C0C0C0">
blablabla
</font>
</td>
<td>
<font color="#C0C0C0">
</font>
</td>
<td>
</td>
</tr>
<tr>
<td align="center" width="36">
<input type="radio" id="sistema" name="unitaId" value="XXX">
</td>
<td>
N/D
</td>
<td>
blablabla
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td align="center" width="36">
<input type="radio" id="registra" name="unitaId" value="XXXX">
</td>
<td>
XXXXX
</td>
<td>
blabla
</td>
<td>
Aderente
</td>
<td>
Sede Principale
Sede Legale
</td>
</tr>
</tbody></table>
Thank you very much.
I find the following solution.
nodesToString <- xpathSApply(doc, "//tr", saveXML)
disabledIndexes <- which(grepl('disabled', nodesToString))
Maybe it could be useful to someone in the future...

fluid rows not diplaying properly bootstrap 3 + mvc4

I have recently started to learn to use bootstrap with Mvc4 and have the following problem:
I am trying to make a standard layout that will look something like this:
the navbar is in a layout.
the view that contains the content is:
#model BootstrapTest4.Models.Menu
#{
Layout = "~/Views/Shared/SiteLayout.cshtml";
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>View1</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="Content/bootstrap/bootstrap.css" rel="stylesheet" media="screen">
</head>
<body>
<div>
<!-- rows -->
<div class="container">
<div class="row">
<div class="span2">
<img alt="140x140" src="http://lorempixel.com/140/140/" class="img-rounded" />
</div>
<div class="span4">
<table class="table">
<thead>
<tr>
<th>
#
</th>
<th>
Product
</th>
<th>
Payment Taken
</th>
<th>
Status
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
1
</td>
<td>
TB - Monthly
</td>
<td>
01/04/2012
</td>
<td>
Default
</td>
</tr>
<tr class="success">
<td>
1
</td>
<td>
TB - Monthly
</td>
<td>
01/04/2012
</td>
<td>
Approved
</td>
</tr>
<tr class="error">
<td>
2
</td>
<td>
TB - Monthly
</td>
<td>
02/04/2012
</td>
<td>
Declined
</td>
</tr>
<tr class="warning">
<td>
3
</td>
<td>
TB - Monthly
</td>
<td>
03/04/2012
</td>
<td>
Pending
</td>
</tr>
<tr class="info">
<td>
4
</td>
<td>
TB - Monthly
</td>
<td>
04/04/2012
</td>
<td>
Call in to confirm
</td>
</tr>
</tbody>
</table>
</div>
<div class="span4">
<table class="table">
<thead>
<tr>
<th>
#
</th>
<th>
Product
</th>
<th>
Payment Taken
</th>
<th>
Status
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
1
</td>
<td>
TB - Monthly
</td>
<td>
01/04/2012
</td>
<td>
Default
</td>
</tr>
<tr class="success">
<td>
1
</td>
<td>
TB - Monthly
</td>
<td>
01/04/2012
</td>
<td>
Approved
</td>
</tr>
<tr class="error">
<td>
2
</td>
<td>
TB - Monthly
</td>
<td>
02/04/2012
</td>
<td>
Declined
</td>
</tr>
<tr class="warning">
<td>
3
</td>
<td>
TB - Monthly
</td>
<td>
03/04/2012
</td>
<td>
Pending
</td>
</tr>
<tr class="info">
<td>
4
</td>
<td>
TB - Monthly
</td>
<td>
04/04/2012
</td>
<td>
Call in to confirm
</td>
</tr>
</tbody>
</table>
</div>
<div class="span2">
<img alt="140x140" src="http://lorempixel.com/140/140/" class="img-rounded" />
</div>
</div>
</div>
<!-- End of Rows -->
</div>
</body>
</html>
the browsers render this in the following way:
this is the source from the browser:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>View1</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="Content/bootstrap/bootstrap.css" rel="stylesheet" media="screen">
</head>
<body>
<div>
<!-- rows -->
<div class="container">
<div class="row">
<div class="span2">
<img alt="140x140" src="http://lorempixel.com/140/140/" class="img-rounded" />
</div>
<div class="span4">
<table class="table">
<thead>
<tr>
<th>
#
</th>
<th>
Product
</th>
<th>
Payment Taken
</th>
<th>
Status
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
1
</td>
<td>
TB - Monthly
</td>
<td>
01/04/2012
</td>
<td>
Default
</td>
</tr>
<tr class="success">
<td>
1
</td>
<td>
TB - Monthly
</td>
<td>
01/04/2012
</td>
<td>
Approved
</td>
</tr>
<tr class="error">
<td>
2
</td>
<td>
TB - Monthly
</td>
<td>
02/04/2012
</td>
<td>
Declined
</td>
</tr>
<tr class="warning">
<td>
3
</td>
<td>
TB - Monthly
</td>
<td>
03/04/2012
</td>
<td>
Pending
</td>
</tr>
<tr class="info">
<td>
4
</td>
<td>
TB - Monthly
</td>
<td>
04/04/2012
</td>
<td>
Call in to confirm
</td>
</tr>
</tbody>
</table>
</div>
<div class="span4">
<table class="table">
<thead>
<tr>
<th>
#
</th>
<th>
Product
</th>
<th>
Payment Taken
</th>
<th>
Status
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
1
</td>
<td>
TB - Monthly
</td>
<td>
01/04/2012
</td>
<td>
Default
</td>
</tr>
<tr class="success">
<td>
1
</td>
<td>
TB - Monthly
</td>
<td>
01/04/2012
</td>
<td>
Approved
</td>
</tr>
<tr class="error">
<td>
2
</td>
<td>
TB - Monthly
</td>
<td>
02/04/2012
</td>
<td>
Declined
</td>
</tr>
<tr class="warning">
<td>
3
</td>
<td>
TB - Monthly
</td>
<td>
03/04/2012
</td>
<td>
Pending
</td>
</tr>
<tr class="info">
<td>
4
</td>
<td>
TB - Monthly
</td>
<td>
04/04/2012
</td>
<td>
Call in to confirm
</td>
</tr>
</tbody>
</table>
</div>
<div class="span2">
<img alt="140x140" src="http://lorempixel.com/140/140/" class="img-rounded" />
</div>
</div>
</div>
<!-- End of Rows -->
</div>
</body>
</html>
</div>
<div id="Footer">
Insert footer
</div>
</div>
<script src="/Scripts/jquery-1.9.1.js"></script>
<script src="/Scripts/bootstrap.js"></script>
</body>
</html>
so it appears that i was using the wrong class for the columns.
instead of span2 i should have used col-md-2 and so on.
the view ended up looking like this:
#model BootstrapTest4.Models.Menu
#{
Layout = "~/Views/Shared/SiteLayout.cshtml";
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>View1</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="Content/bootstrap/bootstrap.css" rel="stylesheet" media="screen">
</head>
<body>
<div>
<!-- rows -->
<div class="container">
<div class="row">
<div class="col-md-2">
<img alt="140x140" src="http://lorempixel.com/140/140/" class="img-rounded" />
</div>
<div class="col-md-4">
<table class="table">
<thead>
<tr>
<th>
#
</th>
<th>
Product
</th>
<th>
Payment Taken
</th>
<th>
Status
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
1
</td>
<td>
TB - Monthly
</td>
<td>
01/04/2012
</td>
<td>
Default
</td>
</tr>
<tr class="success">
<td>
1
</td>
<td>
TB - Monthly
</td>
<td>
01/04/2012
</td>
<td>
Approved
</td>
</tr>
<tr class="error">
<td>
2
</td>
<td>
TB - Monthly
</td>
<td>
02/04/2012
</td>
<td>
Declined
</td>
</tr>
<tr class="warning">
<td>
3
</td>
<td>
TB - Monthly
</td>
<td>
03/04/2012
</td>
<td>
Pending
</td>
</tr>
<tr class="info">
<td>
4
</td>
<td>
TB - Monthly
</td>
<td>
04/04/2012
</td>
<td>
Call in to confirm
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-4">
<table class="table">
<thead>
<tr>
<th>
#
</th>
<th>
Product
</th>
<th>
Payment Taken
</th>
<th>
Status
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
1
</td>
<td>
TB - Monthly
</td>
<td>
01/04/2012
</td>
<td>
Default
</td>
</tr>
<tr class="success">
<td>
1
</td>
<td>
TB - Monthly
</td>
<td>
01/04/2012
</td>
<td>
Approved
</td>
</tr>
<tr class="error">
<td>
2
</td>
<td>
TB - Monthly
</td>
<td>
02/04/2012
</td>
<td>
Declined
</td>
</tr>
<tr class="warning">
<td>
3
</td>
<td>
TB - Monthly
</td>
<td>
03/04/2012
</td>
<td>
Pending
</td>
</tr>
<tr class="info">
<td>
4
</td>
<td>
TB - Monthly
</td>
<td>
04/04/2012
</td>
<td>
Call in to confirm
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-2">
<img alt="140x140" src="http://lorempixel.com/140/140/" class="img-rounded" />
</div>
</div>
</div>
<!-- End of Rows -->
</div>
</body>
</html>

Radio button in multiple columns

I have a table in which I have to place radio buttons in multiple columns. From all these buttons, only one radio button can be checked. How to achieve these. I have five columns viz.A,B,C,D,E and I want to place radio button for each column.
//Here is the code for my .aspx page
<%# Page Title="" Language="C#" MasterPageFile="~/Interviewer
/interviewerMasterPage.master" AutoEventWireup="true" CodeFile="AppRatingForm.aspx.cs"
Inherits="Interviewer_AppRatingForm" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<style type="text/css">
.style1
{
width: 100%;
}
</style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<table cellpadding="2" width="100%">
<tr>
<td colspan="2">
</td>
</tr>
<tr>
<td align="center" class="tdtitle" colspan="2">
Interview Rating Form</td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
<tr>
<td width="25%">
Name of Applicant</td>
<td>
<asp:Label ID="nameLbl" runat="server" Text="Label"></asp:Label>
</td>
</tr>
<tr>
<td>
Post Applied For</td>
<td>
</td>
</tr>
<tr>
<td>
Department</td>
<td>
</td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
<tr>
<td align="center" class="tdtitle" colspan="2">
Assessment</td>
</tr>
<tr>
<td align="left" colspan="2">
<table border="1" cellpadding="3" cellspacing="0" class="style1">
<tr>
<td align="center"
style="font-family: 'Times New Roman', Times, serif; font-size: large; font-weight: bold"
width="5%">
No</td>
<td align="center"
style="font-family: 'Times New Roman', Times, serif; font-size: large; font-weight: bold"
width="25%">
Traits</td>
<td align="center"
style="font-family: 'Times New Roman', Times, serif; font-size: large; font-weight: bold"
width="8%">
A</td>
<td align="center"
style="font-family: 'Times New Roman', Times, serif; font-size: large; font-weight: bold"
width="8%">
B</td>
<td align="center"
style="font-family: 'Times New Roman', Times, serif; font-size: large; font-weight: bold"
width="8%">
C</td>
<td align="center"
style="font-family: 'Times New Roman', Times, serif; font-size: large; font-weight: bold"
width="8%">
D</td>
<td align="center"
style="font-family: 'Times New Roman', Times, serif; font-size: large; font-weight: bold"
width="8%">
E</td>
<td align="center"
style="font-family: 'Times New Roman', Times, serif; font-size: large; font-weight: bold"
width="*">
Comments</td>
</tr>
<tr>
<td colspan="8"
style="font-family: 'Times New Roman', Times, serif; font-size: medium; font-weight: bold;">
Personal Traints</td>
</tr>
<tr>
<td>
1</td>
<td>
Personality</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
2</td>
<td>
Physical Fitness</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
3</td>
<td>
Background</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
4</td>
<td>
Confidance</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
5</td>
<td>
Communication Skills</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
6</td>
<td>
Attitude</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td colspan="8"
style="font-family: 'Times New Roman', Times, serif; font-size: medium; font-weight: bold;">
Job Related Traits</td>
</tr>
<tr>
<td>
1</td>
<td>
Subject Knowledge</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
2</td>
<td>
Related Work Experience</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
3</td>
<td>
Integrity</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
4</td>
<td>
Reliability</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
5</td>
<td>
Adaptability</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
6</td>
<td>
Initiative</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
7</td>
<td>
Team Work</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
8</td>
<td>
Ethics</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" class="tdtitle" colspan="2">
</td>
</tr>
<tr>
<td align="center" colspan="2">
</td>
</tr>
<tr>
<td align="center" colspan="2">
</td>
</tr>
</table>
</asp:Content>
There is GroupName property of the radio button that you need to set for each column.
In your column A, set all radio button's to GroupName="A"
<asp:RadioButton ID="RadioButton1" runat="server" GroupName="A" />
In your column B, set all radio button's to GroupName="B"
<asp:RadioButton ID="RadioButton1" runat="server" GroupName="B" />
This will allow the user to only select one radio button from each column.

Resources