Spacing between table rows in Dreamweaver mail template - html

I tried some solutions I found in other posts but still no luck. I'm getting a small
spacing between all my table rows. All CSS and HTML seems in order. Any ideas?
table {
border-spacing: 0 !important;
border-collapse: collapse !important;
table-layout: fixed !important;
margin: 0 auto !important;
<table cellpadding="0" cellspacing="0" border="0" height="100%" width="100%" bgcolor="#e0e0e0"
style="border-collapse:collapse;">


Please change border-collapse:collapse; to border-collapse:separate; into your table tag inline style.
And use the below CSS code.
table {
border-collapse: separate;
border-spacing: 0 1em;
}
<table border="1" style="border-collapse:separate; margin:0 auto;" cellspacing="5" cellpadding="5">
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
</tr>
<tr>
<td>Value 1</td>
<td>value 2</td>
</tr>
<tr>
<td>Value 3</td>
<td>value 4</td>
</tr>
<tr>
<td>Value 5</td>
<td>value 6</td>
</tr>
</table>

Related

How to fix rowspan border issue when printing or converting to PDF?

I have a table in a report and one cell has rowSpan property. When converting HTML to pdf it shows the border as follows:
I added
page-break-inside: avoid !important;
but it didn't work.
Are there any CSS properties or workaround to solve this issue?

this is a mistake.
you have to use this code
table{
width: 100%;
text-align: center;
border-collapse: collapse;
}
table tr td, table tr th{
border: 1px solid black;
}
table tr{
page-break-before: always;
}
<table>
<tr>
<th>item 1</th>
<th>item 2</th>
<th>item 3</th>
</tr>
<tr>
<td>item 1</td>
<td>item 2</td>
<td>item 3</td>
</tr>
<tr>
<td>item 1</td>
<td>item 2</td>
<td>item 3</td>
</tr>
</table>

padding between table components not working

I have a table.
<table style="margin-left: 20px" class="tg">
<tbody>
<tr>
<td class="tg- 0lax">Question 1</td>
</tr>
<tr>
<td class="tg-0lax">Answwer 1</td>
</tr>
<tr>
<td class="tg- 0lax">Question 2</td>
</tr>
<tr>
<td class="tg- 0lax">Answer 2</td>
</tr>
I want the margin between the question 1 and the answer 1 2px. And the margin between the answer 1 and question 2 , 10 px. I cant get i done. I did try the following things: style="margin-bottom / margin-top in the and , al well as padding 2px. But both doesnt work

<td></td> and <tr></tr> cant be given a margin. Although you can give them a padding when you set display: block; Then you can go on an set things like every second one should get a bigger padding at the bottom (as you wanted it). Here is a snippet with very basic styles:
tr {
display: block;
}
tr:nth-child(even) {
padding-bottom: 20px;
}
tr:nth-child(odd) {
padding-bottom: 2px;
}
<table>
<tbody>
<tr>
<td>Question 1</td>
</tr>
<tr>
<td>Answer 1</td>
</tr>
<tr>
<td>Question 2</td>
</tr>
<tr>
<td>Answer 2</td>
</tr>
</tbody>
</table>

Set border-spacing property 2px to the table, and then skip 5 rows to get 10px something like this:
<table style="margin-left: 20px;border-spacing: 2px;" class="tg">
<tbody>
<tr>
<td class="tg- 0lax" >Question 1</td>
</tr>
<tr>
<td class="tg-0lax">Answwer 1</td>
</tr>
<tr>
<td class="tg-0lax"></td>
</tr>
<tr>
<td class="tg-0lax"></td>
</tr>
<tr>
<td class="tg-0lax"></td>
</tr>
<tr>
<td class="tg-0lax"></td>
</tr>
<tr>
<td class="tg- 0lax">Question 2</td>
</tr>
<tr>
<td class="tg- 0lax">Answer 2</td>
</tr>

Table border is missing in some browsers .(border-collapse)

For the following table structure table border is showing in some browsers, and in some browsers it is not showing.
.test-table, table.test-table th, table.test-table td {
border: 1px solid black;
border-collapse: collapse;
padding: 5px !important;
}
.test-td{
border-bottom:0px !important;
}
<table class="test-table">
<tbody>
<tr>
<td colspan="2">Heading 1</td>
<td rowspan="2">Heading 2</td>
</tr>
<tr>
<td>Test </td>
<td>Test </td>
</tr>
<tr>
<td colspan="2">Test</td>
<td rowspan="2" class="test-td">Test</td>
</tr>
<tr>
<td>Test</td>
<td>Test</td>
</tr>
<tr>
<td colspan="2">Test</td>
</tr>
<tr>
<td colspan="2" class="common-heading">Test</td>
</tr>
<tr></tr>
</tbody>
</table>
See the below screenshot of table in browsers:
Firefox table
Chrome table
The Firefox table structure is the correct structure, but in Chrome it is not showing properly. What is wrong in this code? How to make the table structure same in every browser?

Set rowspan=4 for that Cell like below
.test-table, table.test-table th, table.test-table td {
border: 1px solid black;
border-collapse: collapse;
padding: 5px !important;
}
.test-td{
}
<table class="test-table">
<tbody><tr>
<td colspan="2">Heading 1</td>
<td rowspan="2">Heading 2</td>
</tr>
<tr>
<td>Test </td>
<td>Test </td>
</tr>
<tr>
<td colspan="2">Test</td>
<td rowspan="4" class="test-td">Test</td>
</tr>
<tr>
<td>Test</td>
<td>Test</td>
</tr>
<tr>
<td colspan="2">Test</td>
</tr>
<tr>
<td colspan="2" class="common-heading">Test</td>
</tr>
<tr></tr>
</tbody></table>

Here is the solution might be it help.
You have to add rowspan=4
Here is the example

fixed header and footer of table with repeater control

I have this repeater i want to show scroll and fixed header and footer
below is code which i did to show in repeater
<table>
<thead>
<tr>
<td>Sr No.</td>
<td>Firstname</td>
<td>Middlename</td>
<td>Lastname</td>
<td>Salary</td>
<td>Join Date</td>
<td>Gender</td>
<td>DOB</td>
<td>Designation</td>
<td>Department</td>
<td>HR Manager</td>
<td>Reporting Manager</td>
</tr>
</thead>
<tbody>
<asp:Repeater ID="repEmpList" runat="server">
<ItemTemplate>
<tr>
<td><%#Container.ItemIndex+1 %></td>
<td>Firstname</td>
<td>Middlename</td>
<td>Lastname</td>
<td>Join Date</td>
<td>Gender</td>
<td>DOB</td>
<td>Designation</td>
<td>Department</td>
<td>HR Manager</td>
<td>Reporting Manager</td>
</tr>
</ItemTemplate>
</asp:Repeater>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>0.00</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
now i want both scrolls horizontal and vertical with fixed header and footer
how can i do that?
Please help me
Thank you in advance

thead, tbody { display: block; width:500px; padding: 0px; }
td {width:150px;}
th {width:150px;}
#thbold {
text-align: center;
color: red;
}
td { padding : 0px;}
th { padding : 0px;}
tr { padding : 0px;}
table, td, th {
border: 2px solid black;
margin : 0px;
padding : 0px;
}
tbody {
height: 100px; /* Just for the demo */
overflow-y: scroll; /* Trigger vertical scroll */
overflow-x: scroll; /* Hide the horizontal scroll */
}
<html>
<body>
<table style="width:300px;">
<tbody>
<tr id="thbold">
<th>Head 1</th>
<th>Head 2</th>
<th>Head 3</th>
<th>Head 4</th>
<th>Head 5</th>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
<td>Content 4</td>
<td>Content 5</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
<td>Content 4</td>
<td>Content 5</td>
</tr><tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
<td>Content 4</td>
<td>Content 5</td>
</tr><tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
<td>Content 4</td>
<td>Content 5</td>
</tr>
</tbody>
</table>
</body>
</html>
this is a very quickly done code, though this seems to cater to your needs. feel free to modify and style it as per your needs. Remember to set the thead and tbody as display type to block, and limit height and width of block, set overflow-x, overflow-y to scroll. Please feel free to ask for further clarifications

Freeeze few lines and top row for an HTML table

I have header line on my page and then I have a table displayed on the page. I want that header line and top row of the table to be freezed and rest the of the table to be scrollable. My table is without <THEAD> element and also I tried using positon:fixed to freeze the header line and top row of table but only top row is fixed. How can I freeze header line as well?
TIA
Code:
<div id="topheader">
<h1> This is header line </h1>
</div>
<table ellspacing="0" cellpadding="10" border="1" width="100%" STYLE="empty-cells:show; position:fixed; top:300px;" id="reporttable" >
<tr class="header">
<td align="left">
Field1
</td>
<td align="left">
Field2
</td>
<td align="left">
Field3
</td>
</tr>
</table>
<table cellspacing="0" cellpadding="10" border="1" width="100%" STYLE="empty-cells:show;" id="reporttables">
<tr class="tbody" >
<td>
Data1
</td>
<td>
Data2
</td>
<td>
Data3
</td>
</tr>
</table>
</div>
CSS:
<style>
div.topheader{
position:fixed;
top:200px;
}
</style>

As far as I know, you cannot do this with just one table element.
A good way to approach this is to create 2 tables and use the table-layout: fixed property on the tables and then set a fixed width on td and th.
Check this Demo or the code snippet below.
div.div-demo {
height: 60px;
overflow-y: scroll;
}
table.demo {
table-layout: fixed;
border: 1px solid black;
}
table.demo td, th {
width: 80px;
text-align: left;
}
<table class="demo">
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</table>
<div class="div-demo">
<table class="demo">
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
</table>
</div>