Hopefully this is an easy one but I have not found a solution. I want to put space between columns on a table.
Example
| Cell |<- space ->| Cell |<- space ->| Cell |
An important point is that I do not want space on the edges. There is a border-spacing property but it is not supported in IE (6 or 7) so that is no good. It also puts space at the edges.
The best I have come up with is to put padded-right: 10px on my table cells and add a class to the last one to remove the padding. This is less than ideal because the extra space is part of the cell not outside it. I guess you could do the same thing with a transparent border?
I also tried using jQuery:
$(function() {
$("table > tbody > tr:not(:last-child").addClass("right-padding");
});
but even on tables that are only ~100 rows in size this was taking 200-400ms in some cases, which is too slow.
Any help appreciated.
Thanks
To those suggesting columns they do not work. Try this:
<html>
<head>
<title>Layout</title>
<style type="text/css">
table { border: 1px solid black; }
td { background: yellow; }
</style>
</head>
<body>
<table>
<col style="padding-right: 30px;">
<col style="padding-right: 30px;">
<col>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
</body>
</html>
How about giving each table cell a transparent border? I am pretty sure this will do it for you...
table td {
border:solid 5x transparent;
}
And you can only apply it horizontally like so...
table td {
border-left:solid 10px transparent;
}
table td:first-child {
border-left:0;
}
Here's a complete working demo of what I believe you are trying to accomplish...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Layout</title>
<style type="text/css">
table {
border: 1px solid black;
}
table td {
background: yellow;
border-left:solid 10px transparent;
}
table td:first-child {
border-left:0;
}
</style>
</head>
<body>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
</body>
</html>
I do not believe IE6 supports the CSS :first-child, so here is a workaround for that...
<!–-[if IE 6]>
<style type="text/css">
table td {
border-left: expression(this.previousSibling == null ? '0' : 'solid 5px transparent');
}
</style>
<![endif]-->
It is may be what are you loking for:
You can use two values: the first is the horizontal cellspacing, the second the vertical one.
<table style="border-spacing: 40px 10px;">
try using cols
example
<table>
<col style="padding-right:20px;" />
<col style="padding-right:30px;" />
<col />
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
cols also support classes :)
hope this helps
Darko
EDIT: To clarify a col is an element declared at the top of the table to influence entire columns. The first col element will influence the first column, the second col = second column and so on. They can be grouped in colgroups if you wish to assign the same style to more than one column.
EDIT2: After some more research it turns out that the only reliable styles you can set on a col element are:
border
background
width
visibility
No margin or padding. Bugger! Would setting the width of the columns explicitly solve your problem?
You could also consider using a series of fixed width divs floated left with margins. This might give you a bit more control over the element styling.
.row div {
margin-right: 10px;
float: left;
width: 50px;
}
<div class="row">
<div>Cell One</div>
<div>Cell Two</div>
<div>Cell Three</div>
</div>
Josh's answer doesn't work if you already have borders around your cells, like me.
I solved the problem by shifting the whole table slightly to the left, using "position: relative; left: -10px". I combined this with cellspacing on the table.
<div id='sandbox'>
<table cellspacing='10'>
<tr>
<td class='smoothBox'>
...
</td>
<td class='smoothBox'>
...
</td>
</tr>
</table>
</div>
and the css:
#sandbox {
float: left;
position: relative; /* move the whole sandbox */
left: -11px; /* slightly to the left */
width: 950px;
margin-top: 0px;
padding: 1px;
text-align: left;
}
#sandbox table {
float: left;
width: 100%;
}
#sandbox td {
width: 300px;
vertical-align: top;
}
This is what works for me, I hope it may help you too.
Did you try using col grouping?
<table>
<colgroup>
<col class="right-padding" />
<col class="right-padding" />
<col />
</colgroup>
<tbody>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</tbody>
</table>
It is work for me
border-collapse: separate;
border-spacing: 0px 3px;
What about just adding an empty cell that works as a spacer? You could use the col-tag as stated above to give the empty cells a certain width
<col/>
<col style="width:20px"/>
<col/>
<col style="width:20px"/>
<col/>
<tr>
<td>Data</td>
<td>& nbsp;</td>
<td>Data</td>
<td>& nbsp;</td>
<td>Data</td>
</tr>
Or if you want to do more with them, just add classes to them instead of usin inline styling...
The Josh's answer is quite good, but in my opinion needlessly complicated. When you set the table borders to "hidden" and collapse mode to "collapse", the borders on the outer edges of columns will be eliminated, just as required.
Working example:
Stylesheet:
table#my_table {
border-collapse: collapse;
border-style: hidden;
}
table#my_table td {
border-left: 15px solid transparent;
border-right: 15px solid transparent;
}
HTML:
<table id="my_table">
<tr>
<td>A1</td>
<td>A2</td>
<td>A3</td>
</tr>
<tr>
<td>B1</td>
<td>B2</td>
<td>B3</td>
</tr>
</table>
Related
What I am trying to do?
I am using Puppeteer to convert raw HTML to PDF. I have saved the HTML code in a file, and I'm reading from that file and converting it to PDF.
What is the problem
The thead is NOT overlapping on every page, NO.
It is ONLY overlapping when a thread has multiple rows and half of it gets cut off because of the page break. On the next page, the remainder of the thead is printed ALONG with the overlapped entire thead.
Here is the Output of the converted PDF Overlapping thead
<table id='TblCustomerRating' class='display unbreakable' border='1' cellspacing='0' cellpadding='0'
style=' width: 100%;border-collapse:collapse;'>
<thead>
<tr>
<th class='Greyheader' align="center" style="padding-top: 5px; padding-bottom: 5px;" colspan="4">Askari
Cement Limited</th>
</tr>
<tr>
<th class='Greyheader' align="center" style="padding-top: 5px; padding-bottom: 5px;" colspan="4">External
Rating</th>
</tr>
<tr class='Greyheader'>
<th width="12%" align="center" class='Greyheader'><b> ECAI</b> </th>
<th width="12%" align="center" class='Greyheader'><b>Long Term</b></th>
<th width="12%" align="center" class='Greyheader'><b>Short Term</b></th>
<th style='display:none' width="12%" align="center" class='Greyheader'><b>Rating Date</b></th>
</tr>
</thead>
<tbody>
<tr id="4" type="data" LT="" ST="" MT="" class=" GreyBorder">
<td width="10%" agencyCode='4' class='GreyBorder'
style='background-color:lightgray;text-align: center;padding-top: 5px;padding-bottom: 5px;font-weight: bold;width:10%;'>
JCR-VIS</td>
<td width="10%" RsCode='35' class='GreyBorder' align="center">A</td>
<td width="10%" RsCode='' class='GreyBorder' align="center"></td>
<td align="center" style='display:none' class='GreyBorder'></td>
</tr>
</tbody>
</table><br />
What I have tried?
I have tried adding the following CSS: (it didn't work)
table { overflow: visible !important; }
thead { display: table-header-group !important; }
tr { page-break-inside: avoid !important; }
NOTE:
I repeat, the overlapping is not occurring when the table rows are cut off from page-break. It is ONLY overlapping when thead is cut off because of the page break. as shown in the image above.
Puppeteer version
1.19.0
Node.js version
v16.13.0
npm version
8.1.0
What operating system are you seeing the problem on?
Windows
I think I had the same issue. It is when you have a repeating table header (thead { display: table-header-group }) and the table breaks for printing between tr tags within thead. I couldn't find a way to do it with only the break-after, break-before or break-inside properties. This is a bit of a hack, but here is how I fixed it:
:root {
--header-height: 60px;
}
th {
break-inside: avoid;
}
thead th::after {
content: '';
display: block;
height: var(--header-height);
margin-bottom: -var(--header-height);
break-inside: avoid;
}
The height and negative margin-bottom are equal to the height of the tr elements below the first tr. In my code I just have 60px and -60px hard coded in, but I wanted to be clear that depending on the height of your table header that you will have to change those values. The height creates the size of element that can't be broken inside by a page break and the negative margin-bottom brings back up the table content so that it is not impacted by the existence of the pseudo-element. It essentially forces the header to be on the next page.
face the same problem.
You may put the content of <td> into <div> tag.
In a centered table is the last column hidden.
On hovering over a specific line I want the table to show the last column of this single line.
This should be offering the ability to edit and delete (AJAX) the content/object of the line.
Here's a example:
https://jsfiddle.net/5x2wv160/1/
The problem is the changed size of the table so it is moving a little bit to the left.
My idea fixing this is to change the last column to
tr > td:last-child {
position: relative;
}
But what base element do I have to set the display-style too?
Does anyone have any better ideas?
Check this way of showing the last column on hover to <tr>
.action {
display: none;
}
tr:hover .action{
display: block;
}
<table>
<thead>
<tr>
<th>One</th>
<th>Two</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td>Content1</td>
<td>Content2</td>
<td class="action">Edit</td>
</tr>
<tr>
<td>Content3</td>
<td>Content4</td>
<td class="action">Edit</td>
</tr>
<tr>
<td>Content5</td>
<td>Content6</td>
<td class="action">Edit</td>
</tr>
</tbody>
</table>
You can use visibility instead of dispay:none like this:
table {
margin: 0 auto;
}
tr > td:last-child {
visibility: hidden;
}
tr:hover > td:last-child {
visibility: visible;
}
You are on the right way. But how about only showing contents thus the hyperlink on hover. tr td a { display:none; } VS tr:hover td a{ display:block} so the content would not be moving left and right. Also setting standard widths for each table column would prevent that the columns are moving
I have a case which I need to manipulate the height property on the fly. For that matter, I got a solution by using this code:
$('table tbody tr td:first-child').each(function(){
var height = $(this).height();
$(this).parent().find('td').height(height);
});
It works fine and the calculation is precisely correct. However, for the performance, it's pretty slow because in the real situation, the table can have up to 100 rows. Therefore, I tried to ameliorate it by using native js and some other tricks. Here is the code:
var firstColumn = $('#table-wrapper td:first-child');
for (var i = 0; i < firstColumn.length; i++) {
firstColumn[i].parentNode.style.height = firstColumn[i].offsetHeight + "px";
}
The result is pretty good. It increases the performance around two times faster. However, there is a chance that the calculation would be miss for around 1 px and unfortunately, it can't be tolerated.
Demo for performance calculation: https://jsfiddle.net/yusrilmaulidanraji/ckfdubsf/132/
In that Demo, the result:
First code: +- 2.210000000000008 milliseconds
Second code: +- 0.8699999999998909 milliseconds (+-2x better, but 1px miss calculation chance)
Thus, I have been thinking is there any other way to increase the performance of the first code?
Updated
I just found another information that probably useful.
In desktop Chrome v62.0.3202.62 and mobile Safari v10.3.3, the performance isn't that bad. However, in the other browser, it's still slow.
I assume the main problem is at $(this).parent().find('td').height(height);. Because when I disable that line, the performance becomes much better. Thus, I suppose it would be nice if there is a solution to improve this line.
Hi as I belive only using CSS here is a demo , i remove fied property from css of the td y th:
CSS:
#table-wrapper {
width: 95%;
float: left;
overflow-x: scroll;
background: #ddd;
}
table {
background: #fff;
width: 1200px;
text-align: center;
overflow: hidden;
position: relative;
}
table thead tr th {
width: 15em;
}
table thead tr th:first-child,
table tbody tr td:first-child {
top: auto;
left: 0.5;
/*position: fixed;*/
width: 6em;
}
table thead tr th:nth-child(2),
table tbody tr td:nth-child(2) {
padding-left: 7em;
/*to show second column behind the first*/
}
HTML:
<button id="left">←</button>
<button id="right">→</button>
<div id="table-wrapper">
<table border="1"colspan="0" width="100%" height="100%">
<thead >
<tr>
<th>Heading1</th>
<th>Heading2</th>
<th>Heading3</th>
<th>Heading4</th>
<th>Heading5</th>
</tr>
</thead>
<tbody>
<tr>
<td>1<br/>asdasdada</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
</tr>
<tr>
<td>2<br/>asdasdada<br/>asdasdada</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
</tr>
<tr>
<td>3<br/>asdasdada</td>
<td>32</td>
<td>33</td>
<td>34</td>
<td>35</td>
</tr>
<tr>
<td>4<br/>asdasdada<br/>asdasdada<br/>asdasdada<br/>asdasdada<br/>asdasdada</td>
<td>42</td>
<td>43</td>
<td>44</td>
<td>45</td>
</tr>
<tr>
<td>5<br/>asdasdada</td>
<td>52</td>
<td>53</td>
<td>54</td>
<td>55</td>
</tr>
</tbody>
</table>
</div>
NO JS needed
I have two tables, one is a table with just the table headers, the other table contains all the table data. Both tables are inside their own separate divs. I'm trying to make it so that scrolling horizontally on the table data div will trigger an event in JavaScript that will scroll the table header div at the same rate. I know I could get rid of the divs and just have one table with sticky headers, but I want to try to do it this way. Here's a simplified version of code that I thought would work:
HTML:
<div id = "div1">
<table id = "stickyheaders" class = "table table-condensed table-striped small">
<thead><tr>
<th>header1</th>
<th>header2</th>
<th>header3</th>
<th>header4</th>
<th>header5</th>
<th>header6</th>
<th>header7</th>
<th>header8</th>
<th>header9</th>
<th>header10</th>
</tr></thead>
</table>
</div>
<div id = "div2">
<table id = "tablebody" class = "table table-condensed table-striped small">
<tbody>
<tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
<td>data4</td>
<td>data5</td>
<td>data6</td>
<td>data7</td>
<td>data8</td>
<td>data9</td>
<td>data10</td>
</tr>
</tbody>
</table>
</div>
JavaScript:
$(document).ready(function() {
$('#div2').on('scroll', function () {
$('#').scrollLeft($(this).scrollLeft());
});
} )();
And here's the fiddle
Am I missing something stupid here? Thanks in advance for your help. I know this is similar to another question asked here, but that one doesn't have an answer and didn't really help me out.
You are missing the core scrolling stuff. Replace the $('#') with the right id and remove the () at the end. And yea, add jQuery:
$(document).ready(function() {
$('#div2').on('scroll', function() {
$('#div1').scrollLeft($(this).scrollLeft());
});
});
#div1 {
width: 50%;
height: 40px;
padding: 10px;
border: 1px solid #c0c0c0;
border-radius: 5px;
overflow-y: auto;
overflow-x: auto;
label {
display: block;
}
tr:after {
content: ' ';
display: block;
visibility: auto;
clear: both;
}
}
#div2 {
width: 50%;
height: 50px;
padding: 10px;
border: 1px solid #c0c0c0;
border-radius: 5px;
overflow-y: auto;
overflow-x: auto;
label {
display: block;
}
tr:after {
content: ' ';
display: block;
visibility: auto;
clear: both;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1">
<table id="stickyheaders" class="table table-condensed table-striped small">
<thead>
<tr>
<th>header1</th>
<th>header2</th>
<th>header3</th>
<th>header4</th>
<th>header5</th>
<th>header6</th>
<th>header7</th>
<th>header8</th>
<th>header9</th>
<th>header10</th>
</tr>
</thead>
</table>
</div>
<div id="div2">
<table id="tablebody" class="table table-condensed table-striped small">
<tbody>
<tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
<td>data4</td>
<td>data5</td>
<td>data6</td>
<td>data7</td>
<td>data8</td>
<td>data9</td>
<td>data10</td>
</tr>
</tbody>
</table>
</div>
Scrolling on the bottom div will scroll the top one. Add jQuery to the jsFiddle.
Fiddle: https://jsfiddle.net/2xt1p8t7/
I came across this while trying to answer my own question.
Slightly expanded solution. I was trying to link two divs in a similar manner, so that one scrolled with the other. Here is the initial code (both divs had a class called joinscroll).
$('.joinscroll').on('scroll touchmove mousemove', function(e){
if ($(this).attr("id") == "topdiv") { $('#bottomdiv').scrollLeft($(this).scrollLeft()); }
if ($(this).attr("id") == "bottomdiv") { $('#topdiv').scrollLeft($(this).scrollLeft()); }
})
The problem that I had was that during scrolling, the scroll on the div being scrolled by the function was being detected by the browser, which was causing the function to be executed for that div's scroll. This caused really jerky scrolling, basically because there was a feedback loop.
I tried tricks with preventDefault and stopPropagation, but they didn't work.
In the end, the simplest solution was to detect which div the mouse was hovering over and use that to suppress the other function:
$('.joinscroll').on('scroll touchmove mousemove', function(e){
if ($(this).is(':hover')) {
if ($(this).attr("id") == "topdiv") { $('#bottomdiv').scrollLeft($(this).scrollLeft()); }
if ($(this).attr("id") == "bottomdiv") { $('#topdiv').scrollLeft($(this).scrollLeft()); }
}
})
Hope this helps somebody.
Bootply: http://www.bootply.com/N8lH48VBN7
I have rows where I want each row to expand to show additional rows but I'm having trouble getting rid of the whitespace even when the hidden row is not expanded. I think there might be a way to write a function in JS, but is there a faster and easier way to do this?
Also, when the collapsed rows are expanded, there is some whitespace, and I tried to change some properties of the div to no avail.
Bootstrap has a css style itself.
(so, if you want to apply your css style, you have to use '!important' keyword in your css.)
and, your code structure is not good as well.
therefore, it made a little space inside of each table row.
I think you want to do like this. :)
[RESULT] http://www.bootply.com/0QqWzFcwWo#
1. HTML Source
<div class="col-lg">
<div class="project" id="prodemo"></div>
<table class="table table-striped table-hover">
<thead align="center">
<tr>
<th width="1%"> </th>
<th width="24%">ID</th>
<th width="25%">Name</th>
<th width="25%">Phone</th>
<th width="25%">DOB</th>
</tr>
</thead>
<tbody>
<!-- [demo] -->
<tr class="prevent_drag" data-target="#demo" data-toggle="collapse">
<td> </td>
<td>MyID</td>
<td>MyName</td>
<td>MyPhone</td>
<td>MyDOB</td>
</tr>
<tr id="demo" class="collapse myOptions">
<td> </td>
<td>Details</td>
<td>Details2</td>
<td>Details3</td>
<td>Details4</td>
</tr>
<!-- [demo2] -->
<tr class="prevent_drag" data-target="#demo2" data-toggle="collapse">
<td> </td>
<td>MyID</td>
<td>MyName</td>
<td>MyPhone</td>
<td>MyDOB</td>
</tr>
<tr id="demo2" class="collapse myOptions">
<td> </td>
<td>Details</td>
<td>Details2</td>
<td>Details3</td>
<td>Details4</td>
</tr>
<!-- [demo3] -->
<tr class="prevent_drag" data-target="#demo3" data-toggle="collapse">
<td> </td>
<td>MyID</td>
<td>MyName</td>
<td>MyPhone</td>
<td>MyDOB</td>
</tr>
<tr id="demo3" class="collapse myOptions">
<td> </td>
<td>Details</td>
<td>Details2</td>
<td>Details3</td>
<td>Details4</td>
</tr>
</tbody>
</table>
</div>
2. CSS source
.myOptions {
padding: 0 !important;
margin: 0 !important;
color: red;
}
.table th {
cursor:default;
}
.prevent_drag {
cursor:pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
See this bootply
Just add this css and stay away from !important as other answers suggest.
.table>tbody>tr>td[colspan] {
padding: 0;
}
.table>tbody>tr>td[colspan] .table {
margin-bottom: 0;
}
Never use !important
Almost all answers here suggest to use !important. I think all of them need to read about CSS Specificity and stop using !important today.
...Or you could add this JS code:
$("td[colspan]").css("padding", "0");
$(".table").css("margin-bottom", "0");
Here is the Bootyply
Or can use pure CSS like this:
td[colspan]{
padding:0 !important;
}
.table{
margin-bottom:0 !important;
}
CSS Only Bootply
Use below code in css
tr td{padding: 0!important;}
Thanks With Regards
Remove padding-top and padding-bottom only from your collapsed rows. This padding is coming from bootstrap table style.
tr:not([data-toggle]) > td { padding-top: 0px; padding-bottom: 0px; }
Selecting the cells which are children of rows which do not carry an attribute called data-toggle.
There is margin in the nested table as well. You can remove that:
.table tr:not([data-toggle]) table,
.table tr:not([data-toggle]) td {
padding: 0; margin: 0px;
}
Use this CSS style
tr[data-toggle="collapse"] + tr td {
padding: 0 !important;
}