There is a responsive table which I want to display on mobile devices. The problem is the rightmost column which contains radios is too close to the edge of the screen. Therefore, I add a margin-right to it. However, the margin disappears when I open the page on mobile devices. Adding an empty column would make the table weird. Is there any other way to give a margin to a responsive table on mobile devices? I just do not want the rightmost column too close to the edge.
<meta name="viewport" content="width=device-width, initial-scale=1">
<form ng-submit="submit()">
<div class="table-responsive">
<table class="table table-striped table-bordered">
css:
#media only screen and (max-width: 600px) {
.table-responsive{
margin-right: 5rem !important;
}
}
html:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>中国工程院无线投票系统</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/vote.css">
</head>
<body ng-app="vote" ng-controller="vote_ctrl" ng-init="init()" ng-show="is_start">
<h2 class="sub-header">
<span ng-bind="voteData.department"></span>第<span ng-bind="voteData.round"></span>轮
<span ng-bind="voteData.group"></span><span ng-bind="voteData.vote_type"></span>第
<span ng-bind="voteData.times"></span>次
</h2>
<form ng-submit="submit()">
<div class="table-responsive">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th rowspan="2">提名书号</th>
<th rowspan="2">姓名</th>
<th rowspan="2">年龄</th>
<th rowspan="2">学科专业</th>
<th rowspan="2">工作单位</th>
<th colspan="3" ng-if="voteData.ballot_type =='记分'">圈选栏</th>
<th colspan="2" ng-if="voteData.ballot_type =='表决'">圈选栏</th>
</tr>
<tr>
<th ng-if="voteData.ballot_type =='记分'">A</th>
<th ng-if="voteData.ballot_type =='记分'">B</th>
<th ng-if="voteData.ballot_type =='记分'">C</th>
<th ng-if="voteData.ballot_type =='表决'"><i class="glyphicon glyphicon-ok"></i></th>
<th ng-if="voteData.ballot_type =='表决'"><i class="glyphicon glyphicon-remove"></i></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in voteData.candidates">
<td>{{item.candidate_num}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>{{item.major}}</td>
<td>{{item.company}}</td>
<td ng-if="voteData.ballot_type =='记分'">
<input type="radio" name="{{item}}" ng-model="item.score" value="3" required>
</td>
<td ng-if="voteData.ballot_type =='记分'">
<input type="radio" name="{{item}}" ng-model="item.score" value="2" required>
</td>
<td ng-if="voteData.ballot_type =='记分'">
<input type="radio" name="{{item}}" ng-model="item.score" value="1" required>
</td>
<td ng-if="voteData.ballot_type =='表决'">
<input type="radio" name="{{item}}" ng-model="item.score" value="1" required>
</td>
<td ng-if="voteData.ballot_type =='表决'">
<input type="radio" name="{{item}}" ng-model="item.score" value="0" required>
</td>
</tr>
</tbody>
</table>
</div>
<button type="submit" class="btn btn-success btn-lg center-block">提交</button>
</form>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="js/vote.js"></script>
</body>
</html>
This works fine without #media only... on desktop but it does not work on mobile devices.
Now may it usefull for you!..
#media only screen and (max-width: 500px) {
.table-bordered{
margin-left:20px !important;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="table-responsive">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th rowspan="2">提名书号</th>
<th rowspan="2">姓名</th>
<th rowspan="2">年龄</th>
<th rowspan="2">学科专业</th>
<th rowspan="2">工作单位</th>
<th colspan="3" ng-if="voteData.ballot_type =='记分'">圈选栏</th>
<th colspan="2" ng-if="voteData.ballot_type =='表决'">圈选栏</th>
</tr>
<tr>
<th ng-if="voteData.ballot_type =='记分'">A</th>
<th ng-if="voteData.ballot_type =='记分'">B</th>
<th ng-if="voteData.ballot_type =='记分'">C</th>
<th ng-if="voteData.ballot_type =='表决'"><i class="glyphicon glyphicon-ok"></i></th>
<th ng-if="voteData.ballot_type =='表决'"><i class="glyphicon glyphicon-remove"></i></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in voteData.candidates">
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td ng-if="voteData.ballot_type =='记分'">
<input type="radio" name="{{item}}" ng-model="item.score" value="3" required>
</td>
<td ng-if="voteData.ballot_type =='记分'">
<input type="radio" name="{{item}}" ng-model="item.score" value="2" required>
</td>
<td ng-if="voteData.ballot_type =='记分'">
<input type="radio" name="{{item}}" ng-model="item.score" value="1" required>
</td>
<td ng-if="voteData.ballot_type =='表决'">
<input type="radio" name="{{item}}" ng-model="item.score" value="1" required>
</td>
<td ng-if="voteData.ballot_type =='表决'">
<input type="radio" name="{{item}}" ng-model="item.score" value="0" required>
</td>
</tr>
</tbody>
</table>
</div>
<style>
#media only screen and (max-width: 600px) {
.table-responsive .table-striped{
width: 100% !important;
max-width: 95% !important;
margin: 10px auto !important;
}
.table-responsive
{
width: 100% !important;
max-width: 95% !important;
margin: 10px auto !important;
}
}
</style>
Related
I wish to get table that looks like this:
Blue element is auto generated table in main table.
Problem is that i don't now how to keep columns. Best i can do is:
My html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
}
</style>
</head>
<body>
<table class="table table-bordered">
<thead>
<th>
Date
</th>
<th>
Zm
</th>
<th>
Service
</th>
<th>
Pozition
</th>
<th >
Operation
</th>
<th >
Material Typ
</th>
<th >
Batch and weight
</th>
<th>
Output length
</th>
</thead>
<tbody>
<tr>
<td>
2021-03-28
</td>
<td>
I
</td>
<td>
<input type="text" style="width: 90px;"> <br>
<input type="text" style="width: 90px;">
</td>
<td>
1
</td>
<td colspan="3">
<table>
<tr>
<td>
Izol
</td>
<td>
LS4201R
</td>
<td>
<input type="text"> <br>
<input type="text"> <br>
<button type="submit">Submit</button>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
<input type="text"><br>
<input type="text"><br>
<button type="submit">Submit</button>
</td>
</tr>
<tr>
<td>
EkWZ
</td>
<td>
LE0592
</td>
<td>
<input type="text"><br>
<input type="text"><br>
<button type="submit">Submit</button>
</td>
</tr>
</table>
</td>
<td>
2530
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
2
</td>
<td colspan="3">
<table>
<tr>
<td>
Izol
</td>
<td>
LS4201R
</td>
<td>
<input type="text"> <br>
<input type="text"> <br>
<button type="submit">Submit</button>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
<input type="text"><br>
<input type="text"><br>
<button type="submit">Submit</button>
</td>
</tr>
<tr>
<td>
EkWZ
</td>
<td>
LE0592
</td>
<td>
<input type="text"><br>
<input type="text"><br>
<button type="submit">Submit</button>
</td>
</tr>
</table>
</td>
<td>
3020
</td>
</tr>
</tbody>
</table>
</body>
</html>
Styling is from another answer on the portal, but i don't now how remove space between main table and nested.
Can some one help me whit styling? I'm learning python and don't now JS
You will have to remove the padding in the columns that has a sub table and have some fixed width on the columns.
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
vertical-align: top;
}
.table-inner td {
padding: 0;
}
.table-inner {
border: none;
}
.table-inner tr:first-child td {
border-top: none;
}
.table-inner tr:last-child td {
border-bottom: none;
}
.table-inner td:first-child {
border-left: none;
}
.table-inner td:last-child {
border-right: none;
}
.table-responsive {
display: block;
overflow-x: auto;
width: 100%;
}
.no-border {
border: none;
}
.p-0 {
padding: 0 !important;
}
input[type=text] {
width: 100%;
}
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th style="min-width: 120px; width: 120px">Date</th>
<th style="min-width: 80px;width: 80px">Zm</th>
<th style="min-width: 90px;width: 90px">Service</th>
<th style="min-width: 80px;width: 80px">Pozition</th>
<th style="min-width: 150px;width: 150px">Operation</th>
<th style="min-width: 150px;width: 150px">Material Typ</th>
<th style="min-width: 170px; width: 170px">Batch and weight</th>
<th style="width: auto">Output length</th>
</tr>
</thead>
<tbody>
<tr>
<td>2021-03-28</td>
<td>I</td>
<td class="p-0">
<input type="text" style="width: 90px;"><br />
<input type="text" style="width: 90px;">
</td>
<td>1</td>
<td colspan="3" class="p-0">
<table class="table-inner">
<tbody>
<tr>
<td style="min-width: 160px;width: 160px">Izol</td>
<td style="min-width: 160px;width: 160px">LS4201R</td>
<td style="min-width: 170px;width: 170px">
<input type="text"><br />
<input type="text"><br />
<button type="submit">Submit</button>
</td>
</tr>
<tr>
<td></td>
<td></td>
<td>
<input type="text"><br />
<input type="text"><br />
<button type="submit">Submit</button>
</td>
</tr>
<tr>
<td>EkWZ</td>
<td>LE0592</td>
<td>
<input type="text"><br />
<input type="text"><br />
<button type="submit">Submit</button>
</td>
</tr>
</tbody>
</table>
</td>
<td>2530</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td>2</td>
<td colspan="3" class="p-0">
<table class="table-inner">
<tbody>
<tr>
<td style="min-width: 160px;width: 160px">Izol</td>
<td style="min-width: 160px;width: 160px">LS4201R</td>
<td style="min-width: 170px;width: 170px">
<input type="text"><br />
<input type="text"><br />
<button type="submit">Submit</button>
</td>
</tr>
<tr>
<td></td>
<td></td>
<td>
<input type="text"><br />
<input type="text"><br />
<button type="submit">Submit</button>
</td>
</tr>
<tr>
<td>EkWZ</td>
<td>LE0592</td>
<td>
<input type="text"><br />
<input type="text"><br />
<button type="submit">Submit</button>
</td>
</tr>
</tbody>
</table>
</td>
<td>3020</td>
</tr>
</tbody>
</table>
</div>
I have a table where the user can enter some values and transmit these inputs to my backend via a POST request.
Each row consists of a type, brand and some input fields like buyprice, bottom, top, and stop.
For the purpose that I can connect the input data with the backend data it is important to get the information about the brand which is unique in each row.
Because of that I implemented a hidden input field that the necessary pre-defined value.
But when I check my backend, I only receive the data about buyprice, bottom, top and stop. But nothing about the brand.
Here the relevant passage:
<td th:text="${car.getBrand()}">
<input type="text" name="brand" th:value="${car.getBrand()}" hidden>
</td>
Here the complete table (I use thymleaf as a template-engine)
<div class="container">
<br>
<h4 style="text-align: center">Please specify below</h4>
<br>
<form method="POST">
<table id="buyTable" class="table table-hover">
<thead>
<tr>
<th>Type</th>
<th scope="col">Brand</th>
<th scope="col">Buy-Price</th>
<th scope="col">Bottom</th>
<th scope="col">Top</th>
<th scope="col">Stop</th>
<th>Reduce</th>
<th>Start</th>
</tr>
</thead>
<tbody>
<tr th:each="car : ${cars}">
<td>
<select th:id="${car.getBrand()}" title="selectBuyOrSell" onchange="updateBuyTable(this)">>
<option value="buy">Buy</option>
<option value="sell">Sell</option>
</select>
</td>
<td th:text="${car.getBrand()}">
<input type="hidden" name="brand" th:value="${car.getBrand()}">
</td>
<td><input type="number" step="0.00000001" placeholder="Enter price" name="buyPrice" /></td>
<td><input type="number" step="0.00000001" placeholder="Enter bottom" name="bottom" /></td>
<td><input type="number" step="0.00000001" placeholder="Enter top" name="top" /></td>
<td><input type="number" step="0.00000001" placeholder="Enter stop" name="stop" /></td>
<td>
<label class="custom-control custom-checkbox">
<input id="clickboxReduce" type="checkbox" class="custom-control-input"
onclick="handleClickOnStart(this)" checked>
<span class="custom-control-indicator"></span>
</label>
</td>
<td>
<label class="custom-control custom-checkbox">
<input id="clickboxStart" type="checkbox" class="custom-control-input"
onclick="handleClickOnReduce(this)" checked>
<span class="custom-control-indicator"></span>
</label>
</td>
<!-- <td><input id="clickboxReduce" type="checkbox"></td>
<td><input id="clickboxStart" type="checkbox"></td>-->
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><a style="float:right">Select all</a></td>
<td style="text-align:center"><input type="checkbox" onclick="checkReduce(this)" checked></td>
<td style="text-align:center"><input type="checkbox" onclick="checkInstant(this)" checked></td>
</tr>
</tbody>
</table>
<br/>
<br/>
<button style="float: right!important;" class="btn btn-outline-primary">Continue</button>
<br/>
<br/>
<br/>
<table id="sellTable" class="table table-hover" hidden="true">
<thead>
<tr>
<th>Type</th>
<th>Brand</th>
<th scope="col">Sell-Price</th>
<th scope="col">Amount</th>
</tr>
</thead>
<tbody>
<tr>
</tr>
</tbody>
</table>
</form>
</div>
So it is actually only about getting the brand. Any idea?
Thank you
I figured out that th:text="${car.getBrand()}" within the td tag was overriding the hidden input-field.
So the solution is an a tag and a hidden input within the td tag.
<td>
<a th:text="${car.getBrand()}"></a>
<input type="hidden" name="brand" th:value="${car.getBrand()}"/>
</td>
I have these textboxes,
looks fine in when the browser is maximized but in mobile or when you minized the below textbox overlap the above textbox.
I'm using the below syntax:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<center>
<div class="mrQuestionText">
<style>
.mrNext {
min-width: 15em
}
</style>
<div class="mrInstruct"></div>
<table class="mrQuestionTable" role="presentation">
<tbody>
<tr class="odd">
<th class="mrGridCategoryText" id="Cell.0.0" style="width: 320px;">お客様用「IDコード」</th>
<td id="Cell.1.0" style="width: 75%;"><input autocomplete="off" class="mrEdit" id="_Q1_Q0_Q0" maxlength="1024" name="_QQPage_QUserPage_QUser_Qslice" type="text" value=""></td>
</tr>
<tr class="even">
<th class="mrGridCategoryText" id="Cell.0.1" style="width: 320px;">お客様用「パスワード」</th>
<td id="Cell.1.1" style="width: 75%;"><input autocomplete="off" class="mrEdit" id="_Q1_Q1_Q0" maxlength="1024" name="_QQPage_QUserPage_QPass_Qslice" type="password" value=""></td>
</tr>
</tbody>
</table>
</div>
</center>
</body>
</html>
Apologies, as I can't share the full syntax.
Kindly advise if there is any property that i should add/update.
Try adding the following for table
border-spacing: 5px (spacing u wish)
I have updated your code, you were missing a semicolon here min-width: 15em. Also you need to restructure your code.
Since I am not able to reproduce the issue, I suggest you to use the below updated styles. I have used border-spacing below, try that.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.mrNext {
min-width: 15em;
}
.mrQuestionTable {
border-collapse: separate;
}
.mrQuestionTable tr{
border-spacing: 10px;
}
</style>
</head>
<body>
<center>
<div class="mrQuestionText">
<div class="mrInstruct"></div>
<table class="mrQuestionTable" role="presentation">
<tbody>
<tr class="odd">
<th class="mrGridCategoryText" id="Cell.0.0" style="width: 320px;">お客様用「IDコード」</th>
<td id="Cell.1.0" style="width: 75%;"><input autocomplete="off" class="mrEdit" id="_Q1_Q0_Q0" maxlength="1024" name="_QQPage_QUserPage_QUser_Qslice" type="text" value=""></td>
</tr>
<tr class="even">
<th class="mrGridCategoryText" id="Cell.0.1" style="width: 320px;">お客様用「パスワード」</th>
<td id="Cell.1.1" style="width: 75%;"><input autocomplete="off" class="mrEdit" id="_Q1_Q1_Q0" maxlength="1024" name="_QQPage_QUserPage_QPass_Qslice" type="password" value=""></td>
</tr>
</tbody>
</table>
</div>
</center>
</body>
</html>
You add white-space: nowrap; for 1st column
and th -must be only in the thead section
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<center>
<div class="mrQuestionText">
<style>
.mrGridCategoryText{white-space: nowrap;}
.mrNext {
min-width: 15em;
}
</style>
<div class="mrInstruct"></div>
<table class="mrQuestionTable" role="presentation">
<tbody>
<tr class="odd">
<td class="mrGridCategoryText" id="Cell.0.0" style="width: 320px;">お客様用「IDコード」</td>
<td id="Cell.1.0" style="width: 75%;"><input autocomplete="off" class="mrEdit" id="_Q1_Q0_Q0" maxlength="1024" name="_QQPage_QUserPage_QUser_Qslice" type="text" value=""></td>
</tr>
<tr class="even">
<td class="mrGridCategoryText" id="Cell.0.1" style="width: 320px;">お客様用「パスワード」</td>
<td id="Cell.1.1" style="width: 75%;"><input autocomplete="off" class="mrEdit" id="_Q1_Q1_Q0" maxlength="1024" name="_QQPage_QUserPage_QPass_Qslice" type="password" value=""></td>
</tr>
</tbody>
</table>
</div>
</center>
</body>
</html>
You need to use padding on your td elements in the media query.
html
<table class="mrQuestionTable" role="presentation">
<tbody>
<tr class="odd">
<td class="mrGridCategoryText" id="Cell.0.0" style="width: 320px;">お客様用「IDコード」</td>
<td id="Cell.1.0" style="width: 75%;"><input autocomplete="off" class="mrEdit" id="_Q1_Q0_Q0" maxlength="1024" name="_QQPage_QUserPage_QUser_Qslice" type="text" value=""></td>
</tr>
<tr class="even">
<td class="mrGridCategoryText" id="Cell.0.1" style="width: 320px;">お客様用「パスワード」</td>
<td id="Cell.1.1" style="width: 75%;"><input autocomplete="off" class="mrEdit" id="_Q1_Q1_Q0" maxlength="1024" name="_QQPage_QUserPage_QPass_Qslice" type="password" value=""></td>
</tr>
</tbody>
</table>
css
#media only screen and (min-width: 320px) and (max-width: 768px){
.mrQuestionTable tbody tr td {
padding-bottom: 1em;
}
}
Here is my UI
Here is my code
<div class="container">
<table id="headerTable" class="table table-bordered ">
<thead class="thead-default">
<tr>
<th colspan="2">電文Header</th>
</tr>
</thead>
<tbody>
<tr>
<th>Filler1</th>
<td><input id="123" type="text" class="input-sm"></td>
</tr>
<tr>
<th>MessageType</th>
<td><input id="123" type="text" class="input-sm"></td>
</tr>
<tr>
<th>MessageLength</th>
<td><input id="123" type="text" class="input-sm"></td>
</tr>
</tbody>
</table>
</div>
How do I adjust the to make it smaller like following?
thank you
<div class="container">
<table id="headerTable" class="table table-bordered ">
<thead class="thead-default">
<tr>
<th colspan="2">電文Header</th>
</tr>
</thead>
<tbody>
<tr>
<th class="col-sm-1">Filler1</th>
<td class="col-sm-11">
<input id="123" type="text" class="input-sm">
</td>
</tr>
<tr>
<th class="col-sm-1">MessageType</th>
<td class="col-sm-11">
<input type="text" class="input-sm">
</td>
</tr>
<tr>
<th class="col-sm-1">MessageLength</th>
<td class="col-sm-11">
<input type="text" class="input-sm">
</td>
</tr>
</tbody>
</table>
Just put in the Bootstrap Grid class so that <th> and <td> element would not be too wide.
See https://www.bootply.com/BLINHddRZV for output.
Edit: Did not see it is using bootstrap4. Please check this issue and the reply from mdo. Apparently, the grid class is no longer supported for table.
I'm working on a project where I need to change existing Boostrap2 table responsive. I made a fiddle
<table class="table head center">
<caption></caption>
<tr>
<th scope="col">Member</th>
<th scope="col">Date</th>
<th scope="col">Usage</th>
<th scope="col">Native</th>
<th scope="col">Coverage</th>
<th scope="col"></th>
</tr>
<tr id="members-repeat-container" ng-repeat="">
<td>You</td>
</tr>
</table>
This is all there is to it. A wrapper:
#media screen and (max-width: 767px) {
.responsive-table {
width: 100%;
margin-bottom: 15px;
overflow-y: hidden;
}
}
#media screen and (max-width: 767px) {
.responsive-table {
width: 100%;
margin-bottom: 15px;
overflow-y: hidden;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" />
<div class="responsive-table">
<table class="table head center">
<caption></caption>
<tr>
<th scope="col">Member</th>
<th scope="col">Date</th>
<th scope="col">Usage</th>
<th scope="col">Native</th>
<th scope="col">Coverage</th>
<th scope="col"></th>
</tr>
<tr id="members-repeat-container" ng-repeat="">
<td>You</td>
<td>
<input name='age' class="member-birthday input-small" ng-class="member.preloaded" type="text" name="birthdate##$index + 1##" id="birthdate##$index+1##" placeholder="mm/dd/yyyy" ui-mask="99/99/9999" ui-mask-use-viewvalue="true" ng-model="member.birthday" date-check mtype="##member.type##" order="##$index##" popover="##member.errorMsg##" trigger-click="##member.errorMsg##" popover-trigger="blur" popover-placement="right" required test-check="##$index##">
</td>
<td>
<label for="tobacco## member.id ##" class="aria-hidden hide">Usage
</label>
<input class="tobacco-input" type="checkbox" name="tobacco## member.id ##" id="tobacco## member.id ##" ng-disabled="member.disableTobacco" />
</td>
<td>
<label for="nativeAmerican## member.id ##" class="aria-hidden hide"> Native
</label>
<input class="coverage-input" type="checkbox" name="nativeAmerican## member.id ##" id="nativeAmerican## member.id ##" ng-model="member.nativeAmerican"/>
</td>
<td>
<label for="coverage## member.id ##" class="aria-hidden hide">
Coverage
</label>
<input class="coverage-input" type="checkbox" name="coverage## member.id ##" id="coverage## member.id ##" ng-model="member.seekingCoverage" ng-click="seekCoverage($index)"/>
</td>
<td class="removebtn">
<a href="javascript:void(0);" ng-show="member.removable" ng-click="remove($index, member.type)" class="btn btn-mini">
<spring:message code="label.iex.prescreen.remove" javaScriptEscape="true"/>
</a>
</td>
</tr>
</table>
</div>
I changed the structure and added some grid classes from Bootstrap3. I got the expected result