I need to change the table width in bootstrap 4, as seen in the image the table doesn't use all the width of the page, this is the code in HTML.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div id="tabla">
<div class="row">
<div class="col-sm-12">
<div class="table-responsive">
<table id="tabla_factura" class="table table-hover table-condensed table-bordered table-stripedcol text-center ">
<tr>
<th>No.</th>
<th>Vendedor</th>
<th>Reputacion</th>
<th>Titulo</th>
<th>Precio</th>
<th>Vendidos</th>
<th>Tipo de publicación</th>
<th>Direccion</th>
<th>Envio Gratis</th>
<th>Publicacion</th>
</tr>
<tr>
<td> </td>
<td></td>
<td> </td>
<td></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
</div>
</div>
</div>
You can simply add width in the table and for the center, you can use mx-auto class.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<style>
.table {
width: 75%;
}
</style>
<div id="tabla">
<div class="row">
<div class="col-sm-12">
<div class="table-responsive">
<table id="tabla_factura" class="table table-hover table-condensed table-bordered table-stripedcol text-center mx-auto">
<tr>
<th>No.</th>
<th>Vendedor</th>
<th>Reputacion</th>
<th>Titulo</th>
<th>Precio</th>
<th>Vendidos</th>
<th>Tipo de publicación</th>
<th>Direccion</th>
<th>Envio Gratis</th>
<th>Publicacion</th>
</tr>
<tr>
<td> </td>
<td></td>
<td> </td>
<td></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
</div>
</div>
</div>
Related
Trying to put two tables next to one another. One col-md-4 and the other col-md-8 I want the 4 to be on the left and the 8 to be on the right. Left table being game messages and buttons while the right table is the tic tac toe board. My understanding is when using bootstrap I just need columns to add up to a total of 12.
</head>
<body class="bodyNormal">
<div class="container">
<div class="row">
<div class="col-md-12" style="text-align: center">
<h3 class="mainimg">Tic Tac Toe Game</h3>
</div>
</div>
<div class="row bg-white">
<div class="col-md-4">
<table class="table">
<tbody>
<tr>
<th>
<button class="btn" id="newGame">🔄 New game</button>
</th>
</tr>
<tr>
<th>2</th>
</tr>
<tr>
<th>
<h2 class="player1Turn hidden">Player 1 Turn</h2>
<h2 class="player2Turn hidden">Player 2 Turn</h2>
</th>
</tr>
</tbody>
</table>
<div class="col-md-8">
<table>
<tr>
<td class="grid">7<img src="X.jpg"</td>
<td class="vert grid">8<img src="O.jpg"</td>
<td class="grid">9<img src="X.jpg"</td>
</tr>
<tr>
<td class="hori grid">4<img src="O.jpg"</td>
<td class="vert hori grid">5<img src="X.jpg"</td>
<td class="hori grid">6<img src="O.jpg"</td>
</tr>
<tr>
<td class="grid">1<img src="X.jpg"</td>
<td class="vert grid">2<img src="O.jpg"</td>
<td class="grid">3<img src="X.jpg"</td>
</tr>
</table>
</div>
</div>
</div>
<br />
<script src="index.js"></script>
<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>
</body>
You forgot one div close for col-md-4
</table></div> /*Close Here One div*/
<div class="col-md-8">
https://jsfiddle.net/lalji1051/y0k4bs6p/3/
Problem is you forgot to close div for col-md-4.
Updated code
<div class="container">
<div class="row">
<div class="col-md-12" style="text-align: center">
<h3 class="mainimg">Tic Tac Toe Game</h3>
</div>
</div>
<div class="row bg-white">
<div class="col-md-4">
<table class="table">
<tbody>
<tr>
<th>
<button class="btn" id="newGame">🔄 New game</button>
</th>
</tr>
<tr>
<th>2</th>
</tr>
<tr>
<th>
<h2 class="player1Turn hidden">Player 1 Turn</h2>
<h2 class="player2Turn hidden">Player 2 Turn</h2>
</th>
</tr>
</tbody>
</table>
</div>
<div class="col-md-8">
<table>
<tr>
<td class="grid">7<img src="X.jpg" </td>
<td class="vert grid">8<img src="O.jpg" </td>
<td class="grid">9<img src="X.jpg" </td>
</tr>
<tr>
<td class="hori grid">4<img src="O.jpg" </td>
<td class="vert hori grid">5<img src="X.jpg" </td>
<td class="hori grid">6<img src="O.jpg" </td>
</tr>
<tr>
<td class="grid">1<img src="X.jpg" </td>
<td class="vert grid">2<img src="O.jpg" </td>
<td class="grid">3<img src="X.jpg" </td>
</tr>
</table>
</div>
</div>
</div>
so after the text containing the emergency hotlines were aligned properly, I just cant seen to place the text under the image in order to present the data three in a row (I tried col-4 but json messed it up). My goal is image, then content of the numbers directly below it. I tried: text-align, float, display, media. any help would be appreciated thank you.
heres the current situation:
enter image description here
UPDATE: here is the JSfiddle of the question, placeholders are used to show the positioning. https://jsfiddle.net/ktbmLaq8/
<div class="module-text" ng-controller="VolunteerAidCtrl">
<p class="services-margin">In an emergency, please contact the appropriate service in their respective ASEAN countries for the proper response. These numbers can be called either on landline and mobile and consist of the Police Department, Fire Department, and the Hospital Ambulance. </p>
<hr>
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for..." ng-model="search">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div>
<hr>
<div class="row">
<div class="col-md-6" ng-repeat="service in services | filter:search">
<div class="media">
<div class="media-left">
<img class="flagsize" ng-src="{{service.flagimgurl}}">
</div>
<div class="media-body">
<h4 class="media-heading country-title" ng-bind="service.country"></h4>
<table class="table">
<tr class="remove-border">
<td ng-bind="service.hl1"></td>
<td class="text-left">
<div ng-bind="service.hl1num1"></div>
<div ng-bind="service.hl1num2"></div>
<div ng-bind="service.hl1num3"></div>
</td>
</tr>
<tr class="remove-border">
<td ng-bind="service.hl2"></td>
<td class="text-left">
<div ng-bind="service.hl2num1"></div>
<div ng-bind="service.hl2num2"></div>
<div ng-bind="service.hl2num3"></div>
</td>
</tr>
<tr class="remove-border">
<td ng-bind="service.hl3"></td>
<td class="text-left">
<div ng-bind="service.hl3num1"></div>
<div ng-bind="service.hl3num2"></div>
<div ng-bind="service.hl3num3"></div>
</td>
</tr>
<tr class="remove-border">
<td ng-bind="service.hl4"></td>
<td class="text-left">
<div ng-bind="service.hl4num1"></div>
<div ng-bind="service.hl4num2"></div>
<div ng-bind="service.hl4num3"></div>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- <div class="col-md-3 services-margin">
<img class="flagsize" src="../../../img/flag_cambodia.png">
<table class="services">
<tr>
<td class="country-title">Cambodia</td>
</tr>
<tr>
<td>Fire</td>
<td>:114</td>
</tr>
<tr>
<td></td>
<td>:023 723 555</td>
</tr>
<tr>
<td>Police</td>
<td>:117</td>
</tr>
<tr>
<td></td>
<td>:023 366 841</td>
</tr>
<tr>
<td></td>
<td>:023 720 235</td>
</tr>
<tr>
<td>Ambulance  </td>
<td>:119</td>
</tr>
<tr>
<td></td>
<td>:023 724 891</td>
</tr>
</table>
</div>
<div class="col-md-3 services-margin">
<img class="flagsize" src="../../../img/flag_indonesia.png">
<table class="services">
<tr>
<td class="country-title">Indonesia</td>
</tr>
<tr>
<td>Police</td>
<td>:110</td>
</tr>
<tr>
<td></td>
<td>:112</td>
</tr>
<tr>
<td>Fire</td>
<td>:113</td>
</tr>
<tr>
<td>Ambulance and Rescue  </td>
<td>:118</td>
</tr>
<tr>
<td>Medical Emergencies</td>
<td>:119</td>
</tr>
</table>
</div>
<div class="col-md-3 services-margin">
<img class="flagsize" src="../../../img/flag_laos.png">
<table class="services">
<tr>
<td class="country-title">Laos</td>
</tr>
<tr>
<td>Fire</td>
<td>:190</td>
</tr>
<tr>
<td>Police</td>
<td>:191</td>
</tr>
<tr>
<td>Ambulance  </td>
<td>:195</td>
</tr>
</table>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-3 services-margin">
<img class="flagsize" src="../../../img/flag_malaysia.png">
<table class="services">
<tr>
<td class="country-title">Malaysia</td>
</tr>
<tr>
<td>Fire and Rescue</td>
<td>:994</td>
</tr>
<tr>
<td></td>
<td>:114</td>
</tr>
<tr>
<td>Ambulance/Police  </td>
<td>:999</td>
</tr>
<tr>
<td></td>
<td>:112</td>
</tr>
</table>
</div>
<div class="col-md-3 services-margin">
<img class="flagsize" src="../../../img/flag_myanmar.png">
<table class="services">
<tr>
<td class="country-title">Myanmar</td>
</tr>
<tr>
<td>Fire</td>
<td>:191</td>
</tr>
<tr>
<td>Ambulance  </td>
<td>:192</td>
</tr>
<tr>
<td>Police</td>
<td>:199</td>
</tr>
</table>
</div>
<div class="col-md-3 services-margin">
<img class="flagsize" src="../../../img/flag_philippines.png">
<table class="services">
<tr>
<td class="country-title">Philippines</td>
</tr>
<tr>
<td>Disaster Risk    </td>
<td>:(02) 911-1406</td>
</tr>
<tr>
<td></td>
<td>:(02) 912-1406</td>
</tr>
<tr>
<td>Police</td>
<td>:117</td>
</tr>
<tr>
<td></td>
<td>:911</td>
</tr>
<tr>
<td>Fire</td>
<td>:117</td>
</tr>
<tr>
<td></td>
<td>:(02) 729-5166</td>
</tr>
<tr>
<td></td>
<td>:(02) 410-6319</td>
</tr>
<tr>
<td>Red Cross</td>
<td>:(02) 527-0000</td>
</tr>
<tr>
<td></td>
<td>:(02) 527-8385</td>
</tr>
</table>
</div>
<div class="col-md-3 services-margin">
<img class="flagsize" src="../../../img/flag_singapore.png">
<table class="services">
<tr>
<td class="country-title">Singapore</td>
</tr>
<tr>
<td>Fire and Ambulance  </td>
<td>:995</td>
</tr>
<tr>
<td>Police</td>
<td>:999</td>
</tr>
</table>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-3 services-margin">
<img class="flagsize" src="../../../img/flag_thailand.png">
<table class="services">
<tr>
<td class="country-title">Thailand</td>
</tr>
<tr>
<td>Police</td>
<td>:191</td>
</tr>
<tr>
<td></td>
<td>:1195</td>
</tr>
<tr>
<td>Fire</td>
<td>:199</td>
</tr>
<tr>
<td>Ambulance and Rescue  </td>
<td>:1554</td>
</tr>
<tr>
<td></td>
<td>:1669</td>
</tr>
</table>
</div>
<div class="col-md-3 services-margin">
<img class="flagsize" src="../../../img/flag_vietnam.png">
<table class="services">
<tr>
<td class="country-title">Vietnam</td>
</tr>
<tr>
<td>Police</td>
<td>:113</td>
</tr>
<tr>
<td>Fire</td>
<td>:114</td>
</tr>
<tr>
<td>Ambulance  </td>
<td>:115</td>
</tr>
</table>
</div> -->
The problem is that in your HTML structure, you are listing the information for all countries in a single collective table, while displaying the flags for each country outside of the table. It's not very easy to 'break up' this information that's all stored in the table.
The best way to solve this is to handle both the flag and service information for each country at the same time. In order to do this, first we convert all of your table elements to <div>s, add classes to each of the new divs, and slightly change their order:
<div class="country">
<div class="media-left">
<a href="#">
<img class="media-object flagsize" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/67/Flag_of_Brunei_1906-1959.svg/1000px-Flag_of_Brunei_1906-1959.svg.png" alt="...">
</a>
</div>
<div class="country-info">
<h4 class="media-heading country-title" ng-bind="service.country">Brunei</h4>
<div class="left" ng-bind="service.hl1">Service 1</div>
<div class="right" ng-bind="service.hl1num1">111</div>
<div class="left" ng-bind="service.hl2">Service 2</div>
<div class="right" ng-bind="service.hl1num2">222</div>
<div class="left" ng-bind="service.hl3">Service 2</div>
<div class="right" ng-bind="service.hl1num3">333</div>
</div>
</div>
Then you can target the respective contents much more easily :)
img.flagsize, .country-info {
max-width: 200px
}
.left {
float: left;
clear: left;
}
.right {
float: right;
clear: right;
}
You'll also need to specify that .country-info should be the same width as img.flagsize, or else the information will get pushed to the right of the page:
img.flagsize, .country-info {
max-width: 200px;
}
I've created a fiddle showcasing this here.
With this structure, you can change just about any aspect of the layout you'd like -- margins, padding, and heights no longer pose an issue ;)
Hope this helps! :)
I have this picture below that I want to convert into web from a windows. I manage to do the design but I have a problem in the grid (I am using data tables in bootstrap) I can't do the design in what in the picture like.
<table>
<tr>
<td>
<div>
<input type="radio" />
Radio Button
</div>
</td>
<td>
<input type="radio" />
Radio Button
</td>
</tr>
<tr>
<td>
<div>
<input type="text" />
</div>
</td>
<td>
< div>
< input type="button" />
</div>
</td>
</tr>
</table >
<table >
<tr>
<td>
<div class="row">
<div class="col-lg-12">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="row">
<div class="col-md-6">
< i class="fa fa-list fa-fw" >< / i >Table
< /div >
< /div>
< /div>
< !-- /.panel-heading -->
< div class="panel-body">
< div class="dataTable_wrapper">
< table class="table table-striped table-bordered table-hover table-responsive nowrap"
role="grid" style="width: 100%;" id="dataTables-xxxx">
</table>
</div>
</div>
</div>
</div>
< /div>
</td>
<td>
<div class="row">
<div class="col-lg-12">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="row">
<div class="col-md-6">
< i class="fa fa-list fa-fw"></i>Table
< /div>
< /div>
</div>
<!-- /.panel-heading -->
<div class="panel-body">
<div class="dataTable_wrapper">
<table class="table table-striped table-bordered table-hover table-responsive nowrap"
role="grid" style="width: 100%;" id="dataTables-xxasdxx">
</table>
< /div>
< /div>
< /div>
< /div>
< /div>
</ td>
< /tr>
< /table>
My 2 Images bellow:
Try the below design hope it helps.You can customize the column property as your desire I just added the basic skeleton.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="container">
<div class="row">
<div class=" col-sm-12 form-group">
<div class=" col-sm-2">
<input type="radio" />
Radio Button
</div >
<div class=" col-sm-2">
<input type="radio" />
Radio Button
</div >
</div >
<div class=" col-sm-12 form-group ">
<div class=" col-sm-2">
<input type="text" class="form-control" id="usr">
</div>
<div class=" col-sm-2">
<button type="button" class="btn btn-default">Submit</button>
</div>
</div>
<div class="table-responsive col-md-6">
<table class="table table-bordered">
<thead>
<tr>
<th class="col-md-1">#</th>
<th class="col-md-2">Header</th>
<th class="col-md-3">Header</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-md-1">1,001</td>
<td class="col-md-2">1,001</td>
<td class="col-md-3">1,001</td>
</tr>
<tr>
<td class="col-md-1">1,001</td>
<td class="col-md-2">1,001</td>
<td class="col-md-3">1,001</td>
</tr>
<tr>
<td class="col-md-1">1,001</td>
<td class="col-md-2">1,001</td>
<td class="col-md-3">1,001</td>
</tr>
</tbody>
</table>
</div>
<div class="table-responsive col-md-6">
<table class="table table-bordered">
<thead>
<tr>
<th class="col-md-1">#</th>
<th class="col-md-2">Header</th>
<th class="col-md-3">Header</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-md-1">1,001</td>
<td class="col-md-2">1,001</td>
<td class="col-md-3">1,001</td>
</tr>
<tr>
<td class="col-md-1">1,001</td>
<td class="col-md-2">1,001</td>
<td class="col-md-3">1,001</td>
</tr>
<tr>
<td class="col-md-1">1,001</td>
<td class="col-md-2">1,001</td>
<td class="col-md-3">1,001</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
Or See the below fiddle for a better look
table design demo fiddle (updated)
You can also, do something like this instead of using tables for layout and mimic as close as to your conversion UI.
table tags are meant primarily for data formatting. Bootstrap has the concept of grid layout which is meant for laying out your UI without using tables.
When you open the snippet in full screen, you would see the exact replica. However, when the screen is too small to fit in your entire content, it just wraps into the next row, giving you the flexibility to build responsive layout, which is not possible with table tags.
.custom-margin {
margin-top: 10px;
margin-bottom: 10px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="custom-container">
<div class="radio">
<label class="radio-inline">
<input type="radio" name="" id="optionsRadiosOne" value="optionOne">Radio Button One
</label>
<label class="radio-inline">
<input type="radio" name="" id="optionsRadiosTwo" value="optionTwo">Radio Button Two
</label>
</div>
<div class="custom-margin">
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Enter Email :</label>
<input type="text" class="form-control" placeholder="Enter Email">
</div>
<button type="submit" class="btn btn-primary">Send invitation</button>
</form>
</div>
<div class="row">
<div class="col-lg-3">
<table class="table table-hover">
<tr>
<td>Header One
</td>
<td>Header Two
</td>
</tr>
<tr>
<td>Row Content
</td>
<td>Row Content
</td>
</tr>
<tr>
<td>Row Content
</td>
<td>Row Content
</td>
</tr>
</table>
</div>
<div class="col-lg-6">
<table class="table table-hover">
<tr>
<td>Header One
</td>
<td>Header Two
</td>
</tr>
<tr>
<td>Row Content
</td>
<td>Row Content
</td>
</tr>
<tr>
<td>Row Content
</td>
<td>Row Content
</td>
</tr>
</table>
</div>
</div>
</div>
I have a list of Months which I want to show one per page while printing, so I thought of using page breaks but the issue is I couldn't apply page breaks. I have also tried putting <div class="pagebreak"></div> but I don't understand why it isn't taking effect. Here is my code:
.pagebreak{
page-break-after: always;
}
<table class="fc-year-main-table fc-border-separate">
<tr>
<td class="fc-year-month-border fc-first"></td>
<td class="fc-year-monthly-td" style="">
<div class="fc-year-monthly-name fc-first"><a name="201401" data-year="2014" data-month="0" href="#">January</a></div>
<div class="fc-row fc-widget-header">
<table class="fc-year-month-header">
<thead>
<tr class="fc-year-week-days"></tr>
<tr></tr>
</thead>
</table>
</div>
<div class="fc-day-grid-container">
<div class="fc-day-grid"></div>
</div>
<div class="fc-year-monthly-footer"></div>
</td>
<td class="fc-year-month-border fc-last"></td>
<tr class="pagebreak">
<td class="fc-year-month-border fc-first"></td>
<td class="fc-year-monthly-td" style="">
<div class="fc-year-monthly-name"><a name="201402" data-year="2014" data-month="1" href="#">February</a></div>
<div class="fc-row fc-widget-header">
<table class="fc-year-month-header">
<thead>
<tr class="fc-year-week-days"></tr>
<tr></tr>
</thead>
</table>
</div>
<div class="fc-day-grid-container">
<div class="fc-day-grid"></div>
</div>
<div class="fc-year-monthly-footer"></div>
</td>
<td class="fc-year-month-border fc-last"></td>
</tr>
<tr class="pagebreak">
<td class="fc-year-month-border fc-first"></td>
<td class="fc-year-monthly-td" style="">
<div class="fc-year-monthly-name"><a name="201403" data-year="2014" data-month="2" href="#">March</a></div>
<div class="fc-row fc-widget-header">
<table class="fc-year-month-header">
<thead>
<tr class="fc-year-week-days"></tr>
<tr></tr>
</thead>
</table>
</div>
<div class="fc-day-grid-container">
<div class="fc-day-grid"></div>
</div>
<div class="fc-year-monthly-footer"></div>
</td>
<td class="fc-year-month-border fc-last"></td>
</tr>
<tr class="pagebreak">
<td class="fc-year-month-border fc-first"></td>
<td class="fc-year-monthly-td" style="">
<div class="fc-year-monthly-name"><a name="201404" data-year="2014" data-month="3" href="#">April</a></div>
<div class="fc-row fc-widget-header">
<table class="fc-year-month-header">
<thead>
<tr class="fc-year-week-days"></tr>
<tr></tr>
</thead>
</table>
</div>
<div class="fc-day-grid-container">
<div class="fc-day-grid"></div>
</div>
<div class="fc-year-monthly-footer"></div>
</td>
<td class="fc-year-month-border fc-last"></td>
</tr>
</table>
The first <tr> had no pagebreak class and its </tr> missing, apart from those issues (fixed them) it works using
#media print {
tr.pagebreak { display: block; page-break-before: always; }
}
Seems like pagebreak in tr is a bit tricky, check this question Applying "page-break-before" to a table row (tr)
Working demo:
window.print();
#media print {
tr.pagebreak { display: block; page-break-before: always; }
}
<table class="fc-year-main-table fc-border-separate">
<tr class="pagebreak">
<td class="fc-year-month-border fc-first"></td>
<td class="fc-year-monthly-td" style="">
<div class="fc-year-monthly-name fc-first"><a name="201401" data-year="2014" data-month="0" href="#">January</a></div>
<div class="fc-row fc-widget-header">
<table class="fc-year-month-header">
<thead>
<tr class="fc-year-week-days"></tr>
<tr></tr>
</thead>
</table>
</div>
<div class="fc-day-grid-container">
<div class="fc-day-grid"></div>
</div>
<div class="fc-year-monthly-footer"></div>
</td>
<td class="fc-year-month-border fc-last"></td>
</tr>
<tr class="pagebreak">
<td class="fc-year-month-border fc-first"></td>
<td class="fc-year-monthly-td" style="">
<div class="fc-year-monthly-name"><a name="201402" data-year="2014" data-month="1" href="#">February</a></div>
<div class="fc-row fc-widget-header">
<table class="fc-year-month-header">
<thead>
<tr class="fc-year-week-days"></tr>
<tr></tr>
</thead>
</table>
</div>
<div class="fc-day-grid-container">
<div class="fc-day-grid"></div>
</div>
<div class="fc-year-monthly-footer"></div>
</td>
<td class="fc-year-month-border fc-last"></td>
</tr>
<tr class="pagebreak">
<td class="fc-year-month-border fc-first"></td>
<td class="fc-year-monthly-td" style="">
<div class="fc-year-monthly-name"><a name="201403" data-year="2014" data-month="2" href="#">March</a></div>
<div class="fc-row fc-widget-header">
<table class="fc-year-month-header">
<thead>
<tr class="fc-year-week-days"></tr>
<tr></tr>
</thead>
</table>
</div>
<div class="fc-day-grid-container">
<div class="fc-day-grid"></div>
</div>
<div class="fc-year-monthly-footer"></div>
</td>
<td class="fc-year-month-border fc-last"></td>
</tr>
<tr class="pagebreak">
<td class="fc-year-month-border fc-first"></td>
<td class="fc-year-monthly-td" style="">
<div class="fc-year-monthly-name"><a name="201404" data-year="2014" data-month="3" href="#">April</a></div>
<div class="fc-row fc-widget-header">
<table class="fc-year-month-header">
<thead>
<tr class="fc-year-week-days"></tr>
<tr></tr>
</thead>
</table>
</div>
<div class="fc-day-grid-container">
<div class="fc-day-grid"></div>
</div>
<div class="fc-year-monthly-footer"></div>
</td>
<td class="fc-year-month-border fc-last"></td>
</tr>
</table>
even after setting the tr:last-child's border: none, border is still visible. The edit button should be after the last row. But it got position left. http://jsfiddle.net/priyaa2002/mBfk8/ Here is how it should be
You have a floating <tr> and a floating </div>:
<div id="wrapper">
<div class="para">
<table id="info-table">
<tr>
<td>name:</td>
<td id="name">name</td>
</tr>
<tr>
<td>id:</td>
<td id="myid">myuid</td>
</tr>
<tr>
<td>email:</td>
<td id="email">mysuperemail#email.com</td>
</tr>
<tr> <!-- WHY? -->
</table>
</div>
<div class="edit">
<button type="submit">edit</button>
</div>
</div> <!-- WHY? -->
Get rid of them like so:
<div id="wrapper">
<div class="para">
<table id="info-table">
<tr>
<td>name:</td>
<td id="name">name</td>
</tr>
<tr>
<td>id:</td>
<td id="myid">myuid</td>
</tr>
<tr>
<td>email:</td>
<td id="email">mysuperemail#email.com</td>
</tr>
</table>
</div>
<div class="edit">
<button type="submit">edit</button>
</div>
In the future validate your HTML ;)