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>
Related
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 :)
This link is my html's code,I use bootstrap to design my page.
I can't reduce the width of "th" and "td",I tried to use this code style="width:50px" to reduce the width of "th":
<th class="text-center" style="width:50px">JAN</th>
And this code style="width:50px" to reduce "td":
<td class="text-center" style="width:50px">
<input type="text">
</td>
But there is no effect,the "th" and "td" element still very wide,like this picture:
How to reduce the width of "th" and "td"?
The input elements are breaking your table layout.
Set the input elements inside the td as width: 100%
table td input {
width: 100%;
}
See fiddle: https://jsfiddle.net/pfxcswy2/9/
At the top th tag add width='1'
This will make the column width depending on rows content
<th width='1' class="text-center" style="width:50px">JAN</th>
You can try table-condensed class in your table.
The .table-condensed class makes a table more compact by cutting cell padding in half.
<table border="1" class="table table-bordered text-right table-condensed">
<thead>
<tr bgcolor="#337ab7">
<th class="text-center">No</th>
<th class="text-center">JAN</th>
<th class="text-center">name</th>
<th class="text-center">size</th>
<th class="text-center">except</th>
<th class="text-center"></th>
</tr>
</thead>
<tbody>
This is a quick solution. See if this helps otherwise we will have to write our own css class with higher specificity.
This behavior is due to the bootstrap's styling of th and elements which is given the width of 10%.
.table>thead>tr>th {
width: 10%;
}
All we need to do is use our own style's to override the bootstrap style.
use this code in your external style sheet.It reduces the width to minimum.
Do the same for td's with small modifications according to your need.
CSS code:[ To have the same behaviour through out use below CSS code]
.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td,
.table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
width:0% !important;
}
But this change will be overrided everywhere you use table.Better is to give some class name for the particular row you want your new styles on.
HOPE THIS WILL HELP !
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>
I have an html table with table-layout: fixed and a td with a set width. The column still expands to hold the contents of text that doesn't contain a space. Is there a way to fix this other than wrapping the contents of each td in a div?
Example: http://jsfiddle.net/6p9K3/29/
<table>
<tbody>
<tr>
<td style="width: 50px;">Test</td>
<td>Testing 1123455</td>
</tr><tr>
<td style="width: 50px;">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</td>
<td>B</td>
</tr>
</tbody>
</table>
table
{
table-layout: fixed;
}
td
{
border: 1px solid green;
overflow: hidden;
}
In the example, you can see that the column with AAAAAAAAAAAA... expands despite being explicitly set to 50px wide.
Specify the width of the table:
table
{
table-layout: fixed;
width: 100px;
}
See jsFiddle
Try looking into the following CSS:
word-wrap:break-word;
Web browsers should not break-up "words" by default so what you are experiencing is normal behaviour of a browser. However you can override this with the word-wrap CSS directive.
You would need to set a width on the overall table then a width on the columns. "width:100%;" should also be OK depending on your requirements.
Using word-wrap may not be what you want however it is useful for showing all of the data without deforming the layout.
Make the table rock solid BEFORE the css. Figure your width of the table, then use a 'controlling' row whereby each td has an explicit width, all of which add up to the width in the table tag.
Having to do hundreds html emails to work everywhere, using the correct HTML first, then styling w/css will work around many issues in all IE's, webkit's and mozillas.
so:
<table width="300" cellspacing="0" cellpadding="0">
<tr>
<td width="50"></td>
<td width="100"></td>
<td width="150"></td>
</tr>
<tr>
<td>your stuff</td>
<td>your stuff</td>
<td>your stuff</td>
</tr>
</table>
Will keep a table at 300px wide. Watch images that are larger than the width by extremes
You can add a div to the td, then style that. It should work as you expected.
<td><div>AAAAAAAAAAAAAAAAAAA</div></td>
Then the css.
td div { width: 50px; overflow: hidden; }
You can also use percentages, and/or specify in the column headers:
<table width="300">
<tr>
<th width="20%">Column 1</th>
<th width="20%">Column 2</th>
<th width="20%">Column 3</th>
<th width="20%">Column 4</th>
<th width="20%">Column 5</th>
</tr>
<tr>
<!--- row data -->
</tr>
</table>
The bonus with percentages is lower code maintenance: you can change your table width without having to re-specify the column widths.
Caveat: It is my understanding that table width specified in pixels isn't supported in HTML 5; you need to use CSS instead.
You can also work with "overflow: hidden" or "overflow-x: hidden" (for just the width). This requires a defined width (and/or height?) and maybe a "display: block" as well.
"Overflow:Hidden" hides the whole content, which does not fit into the defined box.
Example:
http://jsfiddle.net/NAJvp/
HTML:
<table border="1">
<tr>
<td><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td>
<td>bbb</td>
<td>cccc</td>
</tr>
</table>
CSS:
td div { width: 100px; overflow-y: hidden; }
EDIT: Shame on me, I've seen, you already use "overflow". I guess it doesn't work, because you don't set "display: block" to your element ...
I would try setting it to:
max-width: 50px;
This works for me
td::after {
content: '';
display: block;
width: 30px;
}
Check out this fiddle:
http://jsfiddle.net/foreyez/hQ9ZR/
<table background='red'>
<thead>
<tr>
<th style='width:3000px;background:red'>Students</th>
</tr>
</thead>
<tbody>
<tr>
<td>Joe</td>
</tr>
<tr>
<td>Shmoe</td>
</tr>
</tbody>
and the css is:
html,body { overflow:auto; }
When I make the width of the Header 3000px I'd expect it to cause an overflow (scrollbar) in the page. But it doesn't. It's because the width of the header cell doesn't change the overall table's width.
If you set the width of the table to 3000px, you'll see the overflow (scrollbar)
So basically, I'm wondering if there's a way to make it so the table's width is defined by it's headers widths?
Thanks
First of all this is not the way you style tables these days
<table background='red'>
use this instead
<table style="background:red;">
And secondly you need to use min-width for th instead of width
My Fiddle
<th style='border: 1px solid #fffff0;min-width:5000px;background:red'>Students</th>