I am working on html table with bootstrap css and want to make the table header fixed with scrollable content.
Below is my code demo:
https://plnkr.co/edit/uRJ6WFVWevksH3ip4kct?p=preview
In my the above plunker demo,you can notice that the header is fixed and the content is scolling but the alignment of the column with the header is mismatched.I have given the same width for the <td> as given the width for <th> but still facing the alignment issue. Please advice what changes to be done to make the column of the content and the header matches and the other issue i noticed is some content of the first row is hidden back to the table header. I tried to resolve using different ways in CSS by setting the width of the header and the <td> but unable to make it..
code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
.header-fixed {
width: 100%
}
.table-fixed thead {
}
.table-fixed tbody {
height: 100%;
width: 100%;
}
thead {
position: fixed;
}
</style>
</head>
<body>
<div>
<div class="modal-body">
<div class="row">
<div class="" style="width: 80%; margin: 0px auto">
<table class="table table-bordered header-fixed" style="border :1px">
<thead>
<tr style="background-color: #cdd0d6;">
<th style="width:10%;white-space: wrap;text-align: center;">ID</th>
<th style="width:30%;white-space: nowrap;text-align: center;">Description</th>
<th style="width:10%;white-space: wrap;text-align: center;">DoorNum</th>
<th style="width:10%;white-space: wrap;text-align: center;">First Name</th>
<th style="width:10%;white-space: wrap;text-align: center;">Num of ordered items</th>
<th style="width:30%;white-space: wrap;text-align: center;">Desc Comments</th>
</tr>
</thead>
<tbody >
<tr>
<td style="width:10%;text-align: center;">10</td>
<td style="width:30%;text-align: center; ">Item belongs to Navvy modal 2014WE belomgs to the user name JOE dispathched after one week of odered date</td>
<td style="width:10%;text-align: center; ">798</td>
<td style="width:10%;text-align: center; ">Joe</td>
<td style="width:10%;text-align: center; ">4</td>
<td style="widtg:30%;text-align: center; ">Order dispatched</td>
</tr>
<tr>
<td style="width:10%;text-align: center;">20</td>
<td style="width:30%;text-align: center; "></td>
<td style="width:10%;text-align: center; ">798</td>
<td style="width:10%;text-align: center; ">Joe</td>
<td style="width:10%;text-align: center; ">4</td>
<td style="widtg:30%;text-align: center; ">Order dispatched</td>
</tr>
<tr>
<td style="width:10%;text-align: center;">30</td>
<td style="width:30%;text-align: center; ">Item belongs to Navvy modal 2014WE belomgs to the user name JOE dispathched after one week of odered date</td>
<td style="width:10%;text-align: center; "></td>
<td style="width:10%;text-align: center; ">Joe</td>
<td style="width:10%;text-align: center; ">4</td>
<td style="widtg:30%;text-align: center; ">Order dispatched</td>
</tr>
<tr>
<td style="width:10%;text-align: center;">40</td>
<td style="width:30%;text-align: center; ">Item belongs to Navvy modal 2014WE belomgs to the user name JOE dispathched after one week of odered date</td>
<td style="width:10%;text-align: center; ">798</td>
<td style="width:10%;text-align: center; ">Joe</td>
<td style="width:10%;text-align: center; ">4</td>
<td style="widtg:30%;text-align: center; ">Order dispatched</td>
</tr>
<tr>
<td style="width:10%;text-align: center;">50</td>
<td style="width:30%;text-align: center; ">Item belongs to Navvy modal 2014WE belomgs to the user name JOE dispathched after one week of odered date</td>
<td style="width:10%;text-align: center; ">798</td>
<td style="width:10%;text-align: center; ">Joe</td>
<td style="width:10%;text-align: center; ">4</td>
<td style="widtg:30%;text-align: center; ">Order dispatched</td>
</tr>
<tr>
<td style="width:10%;text-align: center;">60</td>
<td style="width:30%;text-align: center; ">Item belongs to Navvy modal 2014WE belomgs to the user name JOE dispathched after one week of odered date</td>
<td style="width:10%;text-align: center; ">798</td>
<td style="width:10%;text-align: center; ">Joe</td>
<td style="width:10%;text-align: center; ">4</td>
<td style="widtg:30%;text-align: center; ">Order dispatched</td>
</tr>
<tr>
<td style="width:10%;text-align: center;">70</td>
<td style="width:30%;text-align: center; ">Item belongs to Navvy modal 2014WE belomgs to the user name JOE dispathched after one week of odered date</td>
<td style="width:10%;text-align: center; ">798</td>
<td style="width:10%;text-align: center; ">Joe</td>
<td style="width:10%;text-align: center; ">4</td>
<td style="widtg:30%;text-align: center; ">Order dispatched</td>
</tr>
<tr>
<td style="width:10%;text-align: center;">8</td>
<td style="width:30%;text-align: center; ">Item belongs to Navvy modal 2014WE belomgs to the user name JOE dispathched after one week of odered date</td>
<td style="width:10%;text-align: center; ">798</td>
<td style="width:10%;text-align: center; ">Joe</td>
<td style="width:10%;text-align: center; ">4</td>
<td style="widtg:30%;text-align: center; ">Order dispatched</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>>
</body>
</html>
Set that div width <div class="" style="width: 80%; margin: 0px auto"> to 100%
That,
<div class="" style="width: 100%; margin: 0px auto">
Maybe this can solve your problem.
This is because of the table behaviour. If you set a width for td and th it will still increase if the content is wider. One possible 'fix' would be to set the table-layout to fixed (in css), this will result in all tds and ths to have the same width but this may not be desirable. For smaller screens you can perhaps consider a responsive table. There's a really cool one for the Foundation framework: https://zurb.com/playground/responsive-tables or for Twitter Bootstrap (I see you're using that): https://bootsnipp.com/snippets/featured/no-more-tables-respsonsive-table
Related
I am trying to vertically align the text inside of the table cell however it is not working. It currently shows the text in mobile as shown in the picture below. The problem only exist in mobile.
Screenshot vs How I want it to look
DCR
<table width="100%">
<tbody>
<tr>
<td style="text-align: center;"><strong> Estimated Delivery Times</strong></td>
</tr>
</tbody>
</table>
<table width="100%">
<tbody>
<tr>
<td style="width: 26.2704%; text-align: center;vertical-align: middle;">United States</td>
<td style="text-align: center; width: 31.7604%;vertical-align: middle;"><span>3 - 6 business days</span></td>
<td style="text-align: center; width: 39.2015%;vertical-align: middle;"><span>7 - 13 business days</span></td>
</tr>
<tr>
<td style="width: 26.2704%; text-align: center;vertical-align: middle;">Canada</td>
<td style="text-align: center; width: 31.7604%;vertical-align: middle;"><span>5 - 11 business days</span></td>
<td style="text-align: center; width: 39.2015%;vertical-align: middle;"><span>7 - 15 business days</span></td>
</tr>
<tr>
<td style="width: 26.2704%; text-align: center;vertical-align: middle;">United Kingdom</td>
<td style="text-align: center; width: 31.7604%;vertical-align: middle;"><span>7 - 10 business days</span></td>
<td style="text-align: center; width: 39.2015%;vertical-align: middle;"><span>7 - 12 business days</span></td>
</tr>
<tr>
<td style="width: 26.2704%; text-align: center;vertical-align: middle;">Australia</td>
<td style="text-align: center; width: 31.7604%;vertical-align: middle;"><span>3 - 6 business days</span></td>
<td style="text-align: center; width: 39.2015%;vertical-align: middle;"><span>7 - 15 business days</span></td>
</tr>
<tr>
<td style="width: 26.2704%; text-align: center;vertical-align: middle;">New Zealand</td>
<td style="text-align: center; width: 31.7604%;vertical-align: middle;"><span>6 - 11 business days</span></td>
<td style="text-align: center; width: 39.2015%;vertical-align: middle;"><span>7 - 15 business days</span></td>
</tr>
</tbody>
</table>
just make the width of 2nd and 3rd columns the same
td{
height:15vh;
border:solid 1px black;
}
<table width="100%">
<tbody>
<tr>
<td style="text-align: center;"><strong> Estimated Delivery Times</strong></td>
</tr>
</tbody>
</table>
<table width="100%">
<tbody>
<tr>
<td style="width: 30%; text-align: center;">United States</td>
<td style="text-align: center; width: 35%;"><span>3 - 6 business days</span></td>
<td style="text-align: center; width: 35%;"><span>7 - 13 business days</span></td>
</tr>
<tr>
<td style="width: 30%; text-align: center;vertical-align: middle;">Canada</td>
<td style="text-align: center; width: 35%;vertical-align: middle;"><span>5 - 11 business days</span></td>
<td style="text-align: center; width: 35%;vertical-align: middle;"><span>7 - 15 business days</span></td>
</tr>
<tr>
<td style="width: 30%; text-align: center;vertical-align: middle;">United Kingdom</td>
<td style="text-align: center; width: 35%;vertical-align: middle;"><span>7 - 10 business days</span></td>
<td style="text-align: center; width: 35%;vertical-align: middle;"><span>7 - 12 business days</span></td>
</tr>
<tr>
<td style="width: 30%; text-align: center;vertical-align: middle;">Australia</td>
<td style="text-align: center; width: 35%;vertical-align: middle;"><span>3 - 6 business days</span></td>
<td style="text-align: center; width: 35%;vertical-align: middle;"><span>7 - 15 business days</span></td>
</tr>
<tr>
<td style="width: 30%; text-align: center;vertical-align: middle;">New Zealand</td>
<td style="text-align: center; width: 35%;vertical-align: middle;"><span>6 - 11 business days</span></td>
<td style="text-align: center; width: 35%;vertical-align: middle;"><span>7 - 15 business days</span></td>
</tr>
</tbody>
</table>
I was trying to list some data, the first table may contain first 10 data of the list remaining will show in the next table. I achieve this by looping the same table. But the table is showing different cell width in each page.
The first page shows table like this,
The second page shows the table like this,
The code i used is
<html>
<head>
<style type="text/css" media="print">
#media print {
html, body {
color: black;
margin: 0 !important;
padding: 0 !important;
width: 100%;
height: 100vh !important;
/* overflow: hidden !important; */
font-size: 15px;
}
#page {
page-break-inside: avoid;
size: A4 landscape;
margin: 10;
}
.footer {
display: table-cell;
vertical-align: bottom;
}
input[type=checkbox], input[type=radio] {
opacity: 1 !important;
}
}
</style>
<style type="text/css">
page {
background: white;
display: block;
margin: 0 auto;
margin-bottom: 0.5cm;
box-shadow: 0 0 0.5cm rgba(0, 0, 0, 0.5);
}
page[size="A4"] {
width: 21cm;
height: 29.7cm;
}
page[size="A4"][layout="landscape"] {
width: 29.7cm;
height: 21cm;
}
.table-wtotbr {
width: 100%;
}
.table-wtbr {
width: 100%;
}
.table-wtotbr th, td {
border-bottom: 1px solid black;
}
.table-wtbr th, td {
border: 1px solid black;
}
.container-table {
color: black;
width: 100%;
height: 100%;
font-size: 11px;
}
.footer {
position: fixed;
bottom: 0;
width: 100%;
}
.checkbox {
width:12px;
height:12px;
border: 1px solid #000;
display: inline-block;
}
</style>
</head>
<body>
<%
int rwln = Integer.parseInt(request.getAttribute("rwln").toString());
int cnt = 0;
int cntt = 0;
int listlngth = 9;
int begin = 0;
int mnlpcnt = rwln / 10;
double mlopct = (double) rwln / 10;
%>
<c:set value="<%=cntt%>" var="cntt"></c:set>
<c:set value="<%=cnt%>" var="cnt"></c:set>
<c:set value="<%=mnlpcnt%>" var="mnlpcnt"></c:set>
<c:set value="<%=listlngth%>" var="listlngth"></c:set>
<c:set value="<%=begin%>" var="begin"></c:set>
<!-- getting current date -->
<%
Date dNow = new Date();
SimpleDateFormat ft = new SimpleDateFormat("dd.MM.yyyy");
String cdate = ft.format(dNow);
%>
<!-- /getting current date -->
<jsp:useBean id="today" class="java.util.Date" />
<c:forEach var="kk" begin="0" end="<%=mnlpcnt%>">
<page size="A4" layout="landscape">
<div class="container-table">
<table class="table-wtotbr">
<tr>
<td style="vertical-align: middle; text-align: center;">
<img alt="logo" src="assets/images/logo.png" height="40px">
</td>
<td style="text-align: center; width: 60%; font-size: 20px;">
<b>Comapany</b>
</td>
</tr>
</table>
<table class="table-wtotbr">
<tr height="10px">
<td rowspan="2" style="text-align: center; vertical-align: middle;">Job
Travel Card</td>
<td style="widtd: 10%;">JTC No:<%=request.getAttribute("jtcnum")%></td>
</tr>
<tr height="10px">
<td>Date</td>
</tr>
</table>
<table class="table-wtotbr">
<tr height="10px">
<td style="text-align: left; font-size: 8px;" colspan="2">Project
Number: <%=request.getAttribute("prjnno")%> </td>
<td style="text-align: left; font-size: 8px;" colspan="2">Unit
No. / Tag No.:</td>
</tr>
<tr height="10px">
<td style="text-align: left;" colspan="3">Area Number:</td>
<td style="text-align: left;">Material Class: <%=request.getAttribute("mclass")%></td>
</tr>
<tr height="10px">
<td style="text-align: left;">Drawing No: / ISO Number: <%=request.getAttribute("drwno")%></td>
<td style="text-align: left;" widtd="25%">JC No: <%=request.getAttribute("miv")%></td>
<td style="text-align: left;">Sheet No:</td>
<td style="text-align: left;">Rev. No.:</td>
</tr>
<tr height="10px">
<td style="text-align: left; font-size: 8px;">Item Description:</td>
<td style="text-align: left; font-size: 8px;" colspan="3">ITP
Stage Nos.:</td>
</tr>
</table>
<!-- Fitup data table-sm -->
<table class="table-wtbr">
<tr height="10px">
<td rowspan="12" style="text-align: center; vertical-align: middle;">
<span class="verticaltext"> Fabrication Assembly Fit-Up </span>
</td>
<td style="text-align: center; vertical-align: middle;" rowspan="2">Weld/joint
No</td>
<td colspan="2" style="text-align: center;">Material Spec Grade</td>
<td style="text-align: center; vertical-align: middle;" rowspan="2">Size</td>
<td style="text-align: center; vertical-align: middle;" rowspan="2">Thickness</td>
<td colspan="2" style="text-align: center;">Heat/Plate/TestNo</td>
<td style="text-align: center; vertical-align: middle;" rowspan="2">Welder
No. for tracking</td>
<td colspan="2" style="text-align: center;">Fitup Result</td>
<td style="text-align: center; vertical-align: middle;" rowspan="2">Date</td>
<td style="text-align: center; vertical-align: middle;" rowspan="2" width="5%">Sign</td>
</tr>
<tr height="10px">
<td style="text-align: center; font-size: 8px;" width="10%">Material
1</td>
<td style="text-align: center; font-size: 8px;" width="10%">Material
2</td>
<td style="text-align: center; font-size: 8px;" width="10%">Material
1</td>
<td style="text-align: center; font-size: 8px;" width="10%">Material
2</td>
<td style="text-align: center; font-size: 8px;">Accept</td>
<td style="text-align: center; font-size: 8px;">Reject</td>
</tr>
<c:choose>
<c:when test="${mnlpcnt <1 }">
<c:forEach var="jdata" items="${jtcdata}">
<tr height="10px" style="font-size: 12px;">
<td style="text-align: center;" width="7%">${jdata.getJointno()}</td>
<td style="text-align: center;" width="7%">${jdata.getItem1()}</td>
<td style="text-align: center;" width="7%">${jdata.getItem2()}</td>
<td style="text-align: center;" width="7%">${jdata.getDia()}</td>
<td style="text-align: center;" width="7%">${jdata.getThick()}</td>
<td style="text-align: center;" width="7%"></td>
<td style="text-align: center;" width="7%"></td>
<td style="text-align: center;" width="7%"></td>
<td style="text-align: center;" width="7%"></td>
<td style="text-align: center;" width="7%"></td>
<td style="text-align: center;" width="7%"></td>
<td style="text-align: center;" width="7%"></td>
</tr>
</c:forEach>
</c:when>
<c:when test="${mnlpcnt >= 1 }">
<c:forEach var="qq" begin="${begin}" end="${listlngth}">
<tr height="10px" style="font-size: 12px;">
<td style="text-align: center;">${jtcdata[qq].getJointno()}</td>
<td style="text-align: center;">${jtcdata[qq].getItem1()}</td>
<td style="text-align: center;">${jtcdata[qq].getItem2()}</td>
<td style="text-align: center;">${jtcdata[qq].getDia()}</td>
<td style="text-align: center;">${jtcdata[qq].getThick()}</td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
</tr>
</c:forEach>
</c:when>
</c:choose>
<tr>
<td colspan="5" style="font-size: 10px;">Name & Signature of
fabrication foreman</td>
<td colspan="2" style="font-size: 10px;">Released to</td>
<td colspan="1" style="font-size: 10px;">
<div class="checkbox"></div>
QC/NDE/DIM.</td>
<td colspan="3" style="font-size: 10px;"><div class="checkbox"></div>
Welding</td>
<td colspan="4" style="font-size: 10px;"><div class="checkbox"></div>
Fabrication/Assembly</td>
</tr>
<tr>
<td colspan="7" style="font-size: 10px;">Date</td>
<td colspan="7" style="font-size: 10px;">Date</td>
</tr>
</table>
<!-- welding data -->
<table class="table-wtbr">
<tr heigth="10px">
<td rowspan="13" style="text-align: center; vertical-align: middle;">
<span class="verticaltext"> Welding Details </span>
</td>
<td style="text-align: center; vertical-align: middle;" width="7%"
rowspan="3">Joint No</td>
<td style="text-align: center; vertical-align: middle;" rowspan="3"
width="15%">WPS No.</td>
<td colspan="3" style="text-align: center;">Welding Process</td>
<td colspan="3" style="text-align: center;">Welder/Operation
No.</td>
<td colspan="2" rowspan="2"
style="text-align: center; vertical-align: middle;">Visual
Inspection</td>
<td style="text-align: center; vertical-align: middle;" rowspan="3"
width="5%">Date</td>
<td style="text-align: center; vertical-align: middle;" rowspan="3"
width="5%">Sign</td>
</tr>
<tr heigth="10px">
<td colspan="3" style="text-align: center;">Passes</td>
<td colspan="3" style="text-align: center;">Passes</td>
</tr>
<tr heigth="10px">
<td style="text-align: center; font-size: 8px;" width="10%">Root/Hot</td>
<td style="text-align: center; font-size: 8px;" width="10%">Fill</td>
<td style="text-align: center; font-size: 8px;" width="10%">Cap</td>
<td style="text-align: center; font-size: 8px;" width="10%">Root/Hot</td>
<td style="text-align: center; font-size: 8px;" width="10%">Fill</td>
<td style="text-align: center; font-size: 8px;" width="10%">Cap</td>
<td style="text-align: center; font-size: 8px;" width="4%">Accept</td>
<td style="text-align: center; font-size: 8px;" width="4%">Reject</td>
</tr>
<c:choose>
<c:when test="${mnlpcnt <1 }">
<c:forEach var="jdata" items="${jtcdata}">
<tr height="10px" style="font-size: 12px;">
<td style="text-align: center;">${jdata.getJointno()}</td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
</tr>
</c:forEach>
</c:when>
<c:when test="${mnlpcnt >= 1 }">
<c:forEach var="pp" begin="${begin}" end="${listlngth}">
<tr height="10px" style="font-size: 12px;">
<td style="text-align: center;">${jtcdata[pp].getJointno()}</td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
<td style="text-align: center;"></td>
</tr>
</c:forEach>
</c:when>
</c:choose>
<tr>
<td colspan="4" style="font-size: 10px;">Name & Signature of
fabrication foreman</td>
<td colspan="2" style="font-size: 10px;">Released to</td>
<td colspan="1" style="font-size: 10px;"><div class="checkbox"></div>
QC/NDE/DIM.</td>
<td colspan="2" style="font-size: 10px;"><div class="checkbox"></div>
Welding</td>
<td colspan="5" style="font-size: 10px;"><div class="checkbox"></div>
Fabrication/Assembly</td>
</tr>
<tr>
<td colspan="14" style="font-size: 10px;">Name & Signature of
QC Personel</td>
</tr>
<tr>
<td colspan="7" style="font-size: 10px;">Date</td>
<td colspan="7" style="font-size: 10px;">Date</td>
</tr>
</table>
<div class="footer">
<div style="float: left;">
<!--
<%=request.getAttribute("prjnno")%>-JTC-<%=request.getAttribute("jtcnum")%>-PIP-REV-01
-->
10636-JTC-276-PIP-REV-01
</div>
<div style="float: right;">
<%=cdate%>
</div>
</div>
</div>
</page>
<%
begin = listlngth+1;
listlngth = listlngth+9;
%>
<c:set value="<%=listlngth%>" var="listlngth"></c:set>
<c:set value="<%=begin%>" var="begin"></c:set>
</c:forEach>
</body>
</html>
Can anyone help me to solving this issue.
Thank you in advance.
The table row will overflow table head when page breaks on print. I tried page-break-inside: avoid, but not working.
screenshot
Added some code, the is dynamically changed. On print when page break point is at rowspan part, always causes problems.
<table class="table table-bordered reportTable" id="contentToConvert">
<thead style="text-align: center" class="report-container">
<tr>
<th scope="col" rowspan="2" style="width: 10%; vertical-align: middle;">Order #</th>
<th scope="col" rowspan="2" style="width: 20%; vertical-align: middle;">Customer Information</th>
<th scope="col" rowspan="2" style="width: 9%; vertical-align: middle;">Package(s)</th>
<th scope="col" colspan="5" style="width: 61%; vertical-align: middle;">Package Information</th>
</tr>
<tr>
<th style="width: 17%; vertical-align: middle">Tracking Number</th>
<th style="width: 10%; vertical-align: middle">Size</th>
<th style="width: 10%; vertical-align: middle">Weight</th>
<th style="width: 14%; vertical-align: middle">Instructions</th>
<th style="width: 10%; vertical-align: middle">Status</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3" style="text-align: center; padding-left: 0rem; padding-right: 0rem">RetailOrder_0023
</td>
<td rowspan="3" style="padding-left: 1rem">
George Jason <br>
123 Arlington street <br>
Arlington VA 22222<br>
123-456-7890<br>
GEORGE.Jason#gmail.com
</td>
<td rowspan="3" style="text-align: center">3</td>
<td style="text-align: center; vertical-align: middle; padding: 0">5134134231231261341231</td>
<td style="text-align: center; vertical-align: middle">5 / 5/ 5 inches</td>
<td style="text-align: center; vertical-align: middle">10 lbs 10 oz</td>
<td style="text-align: center; vertical-align: middle"></td>
<td style="text-align: center; vertical-align: middle">Delivered</td>
</tr>
<tr>
<td style="text-align: center; vertical-align: middle; padding: 0">018635013640123401234</td>
<td style="text-align: center; vertical-align: middle">5 / 5/ 5 inches</td>
<td style="text-align: center; vertical-align: middle">10 lbs 10 oz</td>
<td style="text-align: center; vertical-align: middle">Leave at front door</td>
<td style="text-align: center; vertical-align: middle">Delivered</td>
</tr>
<tr>
<td style="text-align: center; vertical-align: middle; padding: 0">018635013640123401234</td>
<td style="text-align: center; vertical-align: middle">5 / 5/ 5 inches</td>
<td style="text-align: center; vertical-align: middle">10 lbs 10 oz</td>
<td style="text-align: center; vertical-align: middle"></td>
<td style="text-align: center; vertical-align: middle">Delivered</td>
</tr>
</tbody>
</table>
I am trying to create a table with fixed header and scrollable content using Bootstrap.I have gone through many examples but none of them seems to be perfectly working with my code. Either the column alignment is missing or the content itself is not getting a scrollbar to scroll.
Source : I have taken the below example from bootstrap code to fix table header , but it doesn't have any solutions to follow.
Example link to be fixed : https://plnkr.co/edit/5285K3dt5aErj3ZgrzIl?p=preview
HTML code:
<div class="modal-body">
<div class="row">
<div class="" style="width: 80%; margin: 0px auto">
<table class="table table-bordered header-fixed" style="border :1px">
<thead>
<tr style="background-color: #cdd0d6;">
<th style="white-space: wrap;text-align: center;">ID</th>
<th style="white-space: nowrap;text-align: center;">Description</th>
<th style="white-space: wrap;text-align: center;">DoorNum</th>
<th style="white-space: wrap;text-align: center;">First Name</th>
<th style="white-space: wrap;text-align: center;">Num of ordered items</th>
<th style="white-space: wrap;text-align: center;">Desc Comments</th>
</tr>
</thead>
<tbody >
<tr>
<td style="text-align: center;">10</td>
<td style="text-align: center; ">Item belongs to Navvy modal 2014WE belomgs to the user name JOE dispathched after one week of odered date</td>
<td style="text-align: center; ">798</td>
<td style="text-align: center; ">Joe</td>
<td style="text-align: center; ">4</td>
<td style="text-align: center; ">Order dispatched</td>
</tr>
....
</div>
PS: I have followed many links and tried to implement, but have not got the solution yet.
Simply
thead {
position: fixed;
}
I am trying to make the following table:
I have an outer border and one border at the bottom.
I got it all right, my only problem is that I can't get the space between the outer border and table (space of 20 px)
when I use border-spacing it doesn't work.
I would appreciate your help.
here is a sample of the code:
http://jsbin.com/AcanusA/1/edit
css code:
.outlined
{
font:13px Tahoma;
width: 70%;
border-collapse: collapse;
border: 10px solid #d0d0ff;
margin: 20px;
border-spacing:20px;
}
.center{
text-align: center;
}
.side{
text-align: left;
}
.lastLine{
border-bottom: 2px solid black;
}
html code:
<!DOCTYPE html>
<html>
<title>web programming project 2</title>
<link rel="stylesheet" type="text/css" href="exe2CSS2.css">
<body>
<table class="outlined">
<tr id="headline">
<th class="side">Item</th>
<th class="side">Manufacturer</th>
<th class="side">Size</th>
<th class="center">Unit Price</th>
<th class="center">Quantity</th>
<th class="center">Total Price</th>
</tr>
<tr class="firstCol">
<td class="side">Corn Flakes</td>
<td class="side">Kellogg's</td>
<td class="side">18 0z</td>
<td class="center">2.5</td>
<td class="center">1</td>
<td class="center">2.5</td>
</tr>
<tr class="secondCol">
<td class="side">Solid White Tuna</td>
<td class="side">Starkist</td>
<td class="side">5 oz</td>
<td class="center">2.79</td>
<td class="center">2</td>
<td class="center">5.58</td>
</tr>
<tr class="firstCol">
<td class="side">Cream of Mushroom Soup</td>
<td class="side">Campbell's</td>
<td class="side">10.75 oz</td>
<td class="center">1.00</td>
<td class="center">2</td>
<td class="center">2.00</td>
</tr>
<tr class="secondCol">
<td class="side">2% Lowfat Milk</td>
<td class="side">Safeway</td>
<td class="side">0.5 gal</td>
<td class="center">1.99</td>
<td class="center">1</td>
<td class="center">1.99</td>
</tr>
<tr class="lastLine">
<td class="side">Extra-Wide Egg Noodles</td>
<td class="side">Golden Grain</td>
<td class="side">12 oz</td>
<td class="center">0.87</td>
<td class="center">3</td>
<td class="center">2.61</td>
</tr>
<tr class="bottom">
<td>Total</td>
<td></td>
<td></td>
<td></td>
<td class="center">9</td>
<td class="center">14.68</td>
</tr>
</table>
</body>
</html>
Why doesn't border-spacing work?
border-spacing doesn't work because, from https://developer.mozilla.org/en-US/docs/Web/CSS/border-spacing,
The border-spacing CSS property specifies the distance between the
borders of adjacent cells (only for the separated borders
model).
Moreover border-spacing is the space between all cells, not only between border cells and the table, so it isn't what you want.
Solution 1: wrapper
#wrapper {
border: 10px solid #d0d0ff;
width: 70%;
overflow: auto;
}
.outlined {
font: 13px Tahoma;
border-collapse: collapse;
margin: 20px;
}
.center {
text-align: center;
}
.side {
text-align: left;
}
.lastLine {
border-bottom: 2px solid black;
}
<div id="wrapper">
<table class="outlined">
<tr id="headline">
<th class="side">Item</th>
<th class="side">Manufacturer</th>
<th class="side">Size</th>
<th class="center">Unit Price</th>
<th class="center">Quantity</th>
<th class="center">Total Price</th>
</tr>
<tr class="firstCol">
<td class="side">Corn Flakes</td>
<td class="side">Kellogg's</td>
<td class="side">18 0z</td>
<td class="center">2.5</td>
<td class="center">1</td>
<td class="center">2.5</td>
</tr>
<tr class="secondCol">
<td class="side">Solid White Tuna</td>
<td class="side">Starkist</td>
<td class="side">5 oz</td>
<td class="center">2.79</td>
<td class="center">2</td>
<td class="center">5.58</td>
</tr>
<tr class="firstCol">
<td class="side">Cream of Mushroom Soup</td>
<td class="side">Campbell's</td>
<td class="side">10.75 oz</td>
<td class="center">1.00</td>
<td class="center">2</td>
<td class="center">2.00</td>
</tr>
<tr class="secondCol">
<td class="side">2% Lowfat Milk</td>
<td class="side">Safeway</td>
<td class="side">0.5 gal</td>
<td class="center">1.99</td>
<td class="center">1</td>
<td class="center">1.99</td>
</tr>
<tr class="lastLine">
<td class="side">Extra-Wide Egg Noodles</td>
<td class="side">Golden Grain</td>
<td class="side">12 oz</td>
<td class="center">0.87</td>
<td class="center">3</td>
<td class="center">2.61</td>
</tr>
<tr class="bottom">
<td>Total</td>
<td></td>
<td></td>
<td></td>
<td class="center">9</td>
<td class="center">14.68</td>
</tr>
</table>
</div>
It's the old way of doing it: set a a margin to the table and place it inside a wrapper element with a border.
Modifying the layout for styling purposes can be syntactically incorrect, but works on old browsers.
Solution 2: outline
.outlined {
font: 13px Tahoma;
width: 70%;
border-collapse: collapse;
border: 20px solid transparent;
margin: 20px;
outline: 10px solid #d0d0ff;
}
.center {
text-align: center;
}
.side {
text-align: left;
}
.lastLine {
border-bottom: 2px solid black;
}
<table class="outlined">
<tr id="headline">
<th class="side">Item</th>
<th class="side">Manufacturer</th>
<th class="side">Size</th>
<th class="center">Unit Price</th>
<th class="center">Quantity</th>
<th class="center">Total Price</th>
</tr>
<tr class="firstCol">
<td class="side">Corn Flakes</td>
<td class="side">Kellogg's</td>
<td class="side">18 0z</td>
<td class="center">2.5</td>
<td class="center">1</td>
<td class="center">2.5</td>
</tr>
<tr class="secondCol">
<td class="side">Solid White Tuna</td>
<td class="side">Starkist</td>
<td class="side">5 oz</td>
<td class="center">2.79</td>
<td class="center">2</td>
<td class="center">5.58</td>
</tr>
<tr class="firstCol">
<td class="side">Cream of Mushroom Soup</td>
<td class="side">Campbell's</td>
<td class="side">10.75 oz</td>
<td class="center">1.00</td>
<td class="center">2</td>
<td class="center">2.00</td>
</tr>
<tr class="secondCol">
<td class="side">2% Lowfat Milk</td>
<td class="side">Safeway</td>
<td class="side">0.5 gal</td>
<td class="center">1.99</td>
<td class="center">1</td>
<td class="center">1.99</td>
</tr>
<tr class="lastLine">
<td class="side">Extra-Wide Egg Noodles</td>
<td class="side">Golden Grain</td>
<td class="side">12 oz</td>
<td class="center">0.87</td>
<td class="center">3</td>
<td class="center">2.61</td>
</tr>
<tr class="bottom">
<td>Total</td>
<td></td>
<td></td>
<td></td>
<td class="center">9</td>
<td class="center">14.68</td>
</tr>
</table>
Add a transparent border and an outline to the table:
border: 20px solid transparent;
outline: 10px solid #d0d0ff;
margin: /* >= 10px */;
Note the outline doesn't increase table's width, so it will overlap surrounding elements. Then, it can be a good idea to use, at least, a margin of 10px.
Browser support
Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit)
1.0 | 1.5 (1.8) | 8.0 | 7.0 | 1.2 (125)
Note: Outlines may be non-rectangular. They are rectangular in Gecko/Firefox. But e.g. Opera draws a non-rectangular shape
Solution 3: box-shadow
.outlined {
font: 13px Tahoma;
width: 70%;
border-collapse: collapse;
border: 20px solid transparent;
margin: 20px;
box-shadow: 0 0 0 10px #d0d0ff;
}
.center {
text-align: center;
}
.side {
text-align: left;
}
.lastLine {
border-bottom: 2px solid black;
}
<table class="outlined">
<tr id="headline">
<th class="side">Item</th>
<th class="side">Manufacturer</th>
<th class="side">Size</th>
<th class="center">Unit Price</th>
<th class="center">Quantity</th>
<th class="center">Total Price</th>
</tr>
<tr class="firstCol">
<td class="side">Corn Flakes</td>
<td class="side">Kellogg's</td>
<td class="side">18 0z</td>
<td class="center">2.5</td>
<td class="center">1</td>
<td class="center">2.5</td>
</tr>
<tr class="secondCol">
<td class="side">Solid White Tuna</td>
<td class="side">Starkist</td>
<td class="side">5 oz</td>
<td class="center">2.79</td>
<td class="center">2</td>
<td class="center">5.58</td>
</tr>
<tr class="firstCol">
<td class="side">Cream of Mushroom Soup</td>
<td class="side">Campbell's</td>
<td class="side">10.75 oz</td>
<td class="center">1.00</td>
<td class="center">2</td>
<td class="center">2.00</td>
</tr>
<tr class="secondCol">
<td class="side">2% Lowfat Milk</td>
<td class="side">Safeway</td>
<td class="side">0.5 gal</td>
<td class="center">1.99</td>
<td class="center">1</td>
<td class="center">1.99</td>
</tr>
<tr class="lastLine">
<td class="side">Extra-Wide Egg Noodles</td>
<td class="side">Golden Grain</td>
<td class="side">12 oz</td>
<td class="center">0.87</td>
<td class="center">3</td>
<td class="center">2.61</td>
</tr>
<tr class="bottom">
<td>Total</td>
<td></td>
<td></td>
<td></td>
<td class="center">9</td>
<td class="center">14.68</td>
</tr>
</table>
You can also use a transparent border with a box-shadow:
border: 20px solid transparent;
box-shadow: 0 0 0 10px #d0d0ff;
margin: /* >= 10px */;
Note the shadow doesn't increase table's width, so it will overlap surrounding elements. Then, it can be a good idea to use, at least, a margin of 10px.
Browser support
Use vendor prefixes (-webkit-box-shadow and -moz-box-shadow) for more support:
Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit)
-----------------------------------------------------------------------------------
10.0 | 4.0 (2.0) | 9.0 | 10.5 | 5.1 (Webkit 534)
4.0 -webkit| 3.5 (1.9.1) -moz| | | 5.0 (Webkit 533) -webkit
Notes (thanks #davidbuttar):
In order to get box-shadow in IE9 or later, you need to set border-collapse to separate. Then, you lose the bar in your table.
On Chrome, transparent borders don't stop the the bar in your table, and it reaches the box-shadow. I think it's a bug, and can be fixed using a white borders instead of transparent.
Appendix: How does box-shadow solution work?
See https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
Formal syntax: none | [inset? && [ <offset-x> <offset-y>
<blur-radius>? <spread-radius>? <color>? ] ]#
inset: omitted, don't want it.
<offset-x> <offset-y>: 0 0, because we don't want to move the shadow.
<blur-radius>: 0, because we don't want a blurred shadow.
<spread-radius>: 10px, because we want the shadow to expand to be 10px wide.
<color>: #d0d0ff
How could it be that you made the border transparent and the shadow
colored, and you got the opposite result?
That's because border-spacing defines a shadow outside borders (unless you use inset)
From the spec:
An outer box-shadow casts a shadow as if the border-box of the element
were opaque. The shadow is drawn outside the border edge only.
I would just use a container div and put the border on that with some padding:
http://jsbin.com/AcanusA/8/edit
Html becomes:
<div class="outlined-container-1">
<div class="outlined-container-2">
<table class="outlined">
<tr id="headline">
<th class="si .......
</div>
</div>
Additional CSS:
.outlined-container-1
{
width:70%;
}
.outlined-container-2
{
border: 10px solid #d0d0ff;
padding:20px;
}
.outlined
{
width:100%;
font:13px Tahoma;
border-collapse: collapse;
}
Obviously change the outlined name to something more relevant.