Here is my html:
<html>
<head>
<meta charset="utf-8">
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-theme.css" rel="stylesheet">
</head>
<body style="padding-top: 47px;">
<table class="table table-hover table-striped-custom">
<thead>
<tr>
<th style="width: 5px;"></th>
<th>Column2</th>
<th>column2</td>
</tr>
</thead>
<tbody>
<tr>
<td style="background-color: #FF5F5F;width: 5px;"></td>
<td>blaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
<td>bla</td>
</tr>
<tr>
<td style="background-color: deepskyblue"></td>
<td>bla</td>
<td>bla</td>
</tr>
</tbody>
</table>
Problem is when setting width for first column: it won't go under 16px. If I put bigger width(20,50), colored column become larger, but when I try to set them thinner (for example 7px), It doesn't take any effect.
How can I do it, without removing any css class from existing template. Colored column have to be first, it's height must be as row's height and I have to be able to set it's width to any value I want.
It's because your bootstrap css is adding 8px padding to the table cells (which is why your min width is 16px: 8px left plus 8px right) - try adding padding:0; for those cells and it should work
Example
It's possible that bootstrap has set min-width on th or td. If so, I'd add an additional style block (in the HTML, if you can't add/edit external CSS), to allow the first column to be as small as you like:
<style type="text/css">
.table td:first-child, .table th:first-child {
min-width: 0;
padding: 0;
}
</style>
Related
Hi Im using html tables + css properties as said in my school textbook(were learning this in class). Basically the error I have is the fact that the layout is not making much of a difference to the dimensions of the table which I have specified in the format.
See the code for more references:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Employees table</title>
<style>
body{background-color:RGB(255,251,214)}
table,td,tr,th{border:1px solid blue}
tr{hover:background-color:blue}
th{text-align:center}
table{table-layout:fixed;}
td{vertical-align:middle}
h2{color:red}
</style>
</head>
<body>
<h2>Table layout fixed</h2>
<table style="table-layout:auto">
<tr>
<th width=" 40%">Emp-id</th>
<th width = 30%>Name</th>
<th width = 17%>Basic</th>
<th width = 28%>HRA</th>
</tr>
<tr><td>101</td><td>Ajay</td><td>20000000000000</td><td>300</td></tr>
<tr><td>102</td><td>Shashi</td><td>15000000000000000</td><td>2800</td></tr>
<tr><td>103</td><td>Mukesh</td><td>130000</td><td>2000</td></tr>
</table>
<h2>Table layout auto</h2>
<table style="table-layout:auto">
<tr>
<th width= "40%">Emp-id</th>
<th width = 30%>Name</th>
<th width = 10%>Basic</th>
<th width = 28%>HRA</th>
</tr>
<tr><td>101</td><td>Ajay</td><td>20000000000000</td><td>300</td></tr>
<tr><td>102</td><td>Shashi</td><td>15000000000000000</td><td>2800</td></tr>
<tr><td>103</td><td>Mukesh</td><td>130000</td><td>2000</td></tr>
</table>
</body>
</html>
And also ps can someone give me a more clear definition of what are table layouts
There are 2 mistakes in your code.
Your total percent is more than 100%, which will render the table wrong than you intended.
More importantly, you had override table-layout in both tables to auto, so table-layout: fixed won't work, thus you can't see the different.
Now with that corrected, you will see the string data you wrote in the td of fixed table get overflow to outside, and with layout auto, the cell will just expand till it force all other cell to minimum width, and then make the table larger to fit the content. To fix this, you can use word-break: break-all in td to force break the string to fit the cell's defined width.
Oh and you wrote :hover wrong too so it won't work, fixed it in the demo for you.
body{background-color:RGB(255,251,214)}
table,td,tr,th{border:1px solid blue}
tr:hover{background-color:blue}
th{text-align:center}
table{table-layout:fixed;width: 100%;}
td{vertical-align:middle; word-break: break-all}
h2{color:red}
<table style="">
<tr>
<th width="35%">Emp-id</th>
<th width="30%">Name</th>
<th width="17%">Basic</th>
<th width="18%">HRA</th>
</tr>
<tr><td>101</td><td>Ajay</td><td>20000000000000</td><td>300</td></tr>
<tr><td>102</td><td>Shashi</td><td>150000000000000000000000000000000000000000000000000000000000000000000000000000000000</td><td>2800</td></tr>
<tr><td>103</td><td>Mukesh</td><td>130000</td><td>2000</td></tr>
</table>
<h2>Table layout auto</h2>
<table style="table-layout:auto">
<tr>
<th width= "30%">Emp-id</th>
<th width ="40%">Name</th>
<th width ="10%">Basic</th>
<th width ="20%">HRA</th>
</tr>
<tr><td>101</td><td>Ajay</td><td>20000000000000</td><td>300</td></tr>
<tr><td>102</td><td>Shashi</td><td>150000000000000000000000000000000000000000000000000000000000000000000000000000000000</td><td>2800</td></tr>
<tr><td>103</td><td>Mukesh</td><td>130000</td><td>2000</td></tr>
</table>
I am doing a project for my employer, and trying to print a large data table over multiple pages for printing purposes.
When I am trying to print the table however, the top borders seem to overlap onto the previous page.
Image preview:
I have tried editing the borders to be different thicknesses, and applying the CSS properties to now allow a to be split over multiple pages, however none of it has had any effect.
Right now I have removed all CSS from the page apart from Bootstrap and the page break rules, but am still having the same issue
My code:
table {
page-break-inside: auto
}
tr {
page-break-inside: avoid;
page-break-after: auto
}
thead {
display: table-header-group
}
tfoot {
display: table-footer-group
}
<table id="test" class="table table-bordered thead-light">
<thead>
<tr>
<th scope="col">Date / Time</th>
<th scope="col">Log Class</th>
<th scope="col">Reason</th>
<th scope="col">Detail</th>
<th scope="col">Hold State</th>
<th scope="col">UL ID</th>
<th scope="col">SKU</th>
<th scope="col">Location</th>
<th scope="col">Destination</th>
<th scope="col">Qty</th>
<th scope="col">User</th>
</tr>
</thead>
<tbody>
Table Data
</tbody>
</table>
I would have expected the borders to remain on the page which the starts, and not clip onto the previous page, however as you can see in the original image, it is still clipping.
Any help would really be appreciated.
I cant understand your real issue but i think you are trying to give different border to th, td then add different class to required one and add border css.
Example:
.border-style {
border:2px solid red !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Bordered Table</h2>
<p>The .table-bordered class adds borders to a table:</p>
<table class="table table-bordered">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td >Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td class="border-style">Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
I got your issue but not sure why try to inspect that and do a css display:none; if anything on that border
Cant find the issue because i cant inspect on that
Sorry
And check if anywhere you add a display:inline-block i have a issue with this recently
I had this exact problem and unfortunately I didn't find a proper solution - but read on!
The issue seemed to be that the top border from the table header 'leaked' over to the previous page. After some trial an error I found two workarounds (short of deleting the project entirely).
"Solution" #1 - Remove stylings :'(
Removing all borders AND BACKGROUNDS on the top row (including the table border) meant that the leaking pixels are invisible. Hurrah!
#media print {
table, thead tr, thead th {
/* You might not need '!important' with your styling, but
I found with bootstrap that this is the safest option. */
background: none !important;
border: none !important;
}
}
<table class="table table-bordered">
<thead>
<tr>
<th>Awww...</th>
<th>These</th>
<th>are</th>
<th>boring</th>
<th>headers!</th>
</tr>
</thead>
</table>
But while this fixed my issue, it broke my heart. This wasn't the solution I needed...
"Solution" #2 - Hack at it 'till it breaks!
After some considerable crying, I found that I could add another dummy row above my headers and remove the styling on that instead!
"What a terrible solution - thanks Mark!"
th {
border: solid 1px hotpink;
}
#media not print {
.print-only {
display: none;
}
}
<table class="table table-bordered">
<thead>
<!-- This is where the magic is. This row 'pads' the table
headers and keeps them on the same page -->
<tr class="print-only">
<th style="border: none !important; background: none !important;"></th>
</tr>
<tr>
<th>Look</th>
<th>at</th>
<th>these</th>
<th>stylish</th>
<th>headers!</th>
</tr>
</thead>
</table>
So yeah... when one of you coding geniuses (genii?) come across this answer and realize that the rest of us are down shit's creek, please feel free to post a real solution to this headache :)
I am studying tables in Bootstrap 4.
I don't know why the background-color in table-light class is not applied. Is this because table-light cannot override the thead-dark? If it is true, can you tell me what makes thead-dark take priority over? If it is not what I think, please explain the reason behind it for me.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<title>Table</title>
</head>
<body>
<div class="container">
<h2>Contextual Classes</h2>
<p>Contextual classes can be used to color the table, table rows or table cells. The classes that can be used are: .table-primary, .table-success, .table-info, .table-warning, .table-danger, .table-active, .table-secondary, .table-light and .table-dark:</p>
<table class="table">
<thead class="thead-dark">
<tr>
<th class="table-light">Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Default</td>
<td>Defaultson</td>
<td>def#somemail.com</td>
</tr>
<tr class="table-primary">
<td>Primary</td>
<td>Joe</td>
<td>joe#example.com</td>
</tr>
<tr class="table-success">
<td>Success</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr class="table-danger">
<td>Danger</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr class="table-info">
<td>Info</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
<tr class="table-warning">
<td>Warning</td>
<td>Refs</td>
<td>bo#example.com</td>
</tr>
<tr class="table-active">
<td>Active</td>
<td>Activeson</td>
<td>act#example.com</td>
</tr>
<tr class="table-secondary">
<td>Secondary</td>
<td>Secondson</td>
<td>sec#example.com</td>
</tr>
<tr class="table-light">
<td>Light</td>
<td>Angie</td>
<td>angie#example.com</td>
</tr>
<tr class="table-dark text-dark">
<td>Dark</td>
<td>Bo</td>
<td>bo#example.com</td>
</tr>
</tbody>
</table>
</div>
</body> <!-- source: https://www.w3schools.com/bootstrap4/bootstrap_tables.asp -->
Problem:
This is how .thead-light is defined in the Bootstrap stylesheet.
.table .thead-light th {
color: #495057;
background-color: #e9ecef;
border-color: #dee2e6;
}
You see it targets th elements which are descendants of an element which has the thead-light class.
So when you apply the class to a th element, as you do in
<th class="table-light">Firstname</th>
you would need to target
th.thead-light {
/* CSS */
}
Otherwise the specificity of .table-dark > th will override that of <th class="table-light">
.table-dark,
.table-dark > th, /* <<< This rule */
.table-dark > td {
background-color: #c6c8ca;
}
In the bootstrap.css this rule:
.table .thead-dark th {
color: #fff;
background-color: #212529;
border-color: #32383e;
}
is defined after this rule:
.table-light,
.table-light > th,
.table-light > td {
background-color: #fdfdfe;
}
But most importantly:
When you use the CSS Specificity Calculator and compare this:
th.table-light (which is what's actually being used here) to this .table .thead-dark th, you'll see that the latter has higher specificity and thus wins regardless.
Conclusion:
In order for a css rule to "win" (i.e. take precedence) it must either have higher specificity than a competing css rule OR if the specificity is the same (which is not the case here), it must be listed after the competing css rule.
Also note:
Using the !important flag (as some people might suggest) should only be reserved for quick testing and should not be used as a permanent solution. (because otherwise, it would result in a nightmare for maintenance)
I'm writing a program which will produce an html file for displaying some data. I need all columns to be aligned, so I'm trying to use a single html table, but I want to have solid horizontal lines in between some of the rows to separate the data. Using border-top and border-bottom I've been able to get most of the way towards what I want, however the horizontal lines that this produces aren't solid (see image).
My questions are:How can I get solid horiztonal lines between some of rows in my tableAlso, a minor query, is there a better way of getting a bit of space between the row labels in the left hand column and the data. Currently I'm specifying a blank column.The html behind that image is as follows:
<html>
<head>
<meta HTTP-EQUIV="Content-Type" Content="text/html; charset=Windows-1252">
<style type="text/css">
tr.border_top td {
border-top:1pt solid black;
}
tr.border_bottom td {
border-bottom:1pt solid black;
}
</style>
</head>
<body bgcolor=white><b>DATA</b></p>
<table>
<col align="left"></col>
<col width=20></col>
<col align="right"></col>
<col align="right"></col>
<col align="right"></col>
<col align="right"></col>
<tr class="border_top">
<td><b>XYZ1</b></td>
<td></td>
<td>2.120</td>
<td><span style="color:blue">2.280</span></td>
<td><span style="color:blue">2.810</span></td>
<td>3.000</td>
</tr>
<tr class="border_bottom">
<td><b>ABC1</b></td>
<td></td>
<td>1.370</td>
<td><span style="color:blue">1.550</span></td>
<td>1.690</td>
<td><span style="color:blue">1.780</span></td>
</tr>
<tr>
<td><b>XYZ2</b></td>
<td></td>
<td><span style="color:blue">1.900</span></td>
<td>1.940</td>
<td>2.050</td>
<td><span style="color:blue">2.100</span></td>
</tr>
<tr class="border_bottom">
<td><b>ABC2</b></td>
<td></td>
<td><span style="color:blue">1.910</span></td>
<td>1.950</td>
<td>2.060</td>
<td><span style="color:blue">2.100</span></td>
</tr>
</table>
</body>
</html>
In the CSS add the remove the default border-spacing and add padding to the cells
table { border-spacing:0 }
td { padding:10px; }
JSFiddle Demo
Give your table a class, for example mytable.
Then in your CSS do:
.mytable {
border-collapse: collapse;
}
.mytable td {
padding: .2em;
}
The collapse makes the space between cells go away and therefore makes a continuous border, like you asked for. However, then all the texts are very close together, so a little padding on the cells makes it look nicer.
I can't get colspan to work when I use a fixed width (IE 7)? Why?!
Sample Code:
<html>
<head>
<style>
.inputGroup td
{ width:250px; }
</style>
</head>
<body>
<table class="inputGroup">
<tr>
<td>cell1</td>
<td>cell2</td>
</tr>
<tr>
<td colspan="2">This should span two columns but it doesnt</td>
</tr>
<tr>
<td>cell1</td>
<td>cell2</td>
</tr>
</table>
</body>
</html>
Help anybody? :(
it does, but you've limited the width. If you want, try creating another class called '.doubleSpanInputGroup' or something with width 500 and set that class onto the spanning column.
eg.
<html>
<head>
<style>
.inputGroup td
{ width:250px; }
.inputGroup td.doubleInputGroup
{ width:500px; }
</style>
</head>
<body>
<table class="inputGroup">
<tr>
<td>cell1</td>
<td>cell2</td>
</tr>
<tr>
<td colspan="2" class="doubleInputGroup">This should span two columns but it doesnt</td>
</tr>
<tr>
<td>cell1</td>
<td>cell2</td>
</tr>
</table>
</body>
</html>
EDIT: made the new style more hierarchical
Try making the rule apply to tr instead of td and make the width 500px instead, as such:
.inputGroup tr { width: 500px; }
The problem you're having is because you've set a limit on the td to be at most 250px wide, so the browser is simply following your instructions.
in general manner :
table tr:first-child td:first-child{ width:86px; }
if this is the only width all first column take this width and colspan in ie7 will work
I tried to set the width of the colspan cells to auto, seemed to work fine in IE7/8/9
.yourColSpanTD { width: auto !important; }