I am drawing one table with border=1 but it looks quite prominent as I am enclosing one image inside it so I want to make it thinner for better look and feel.
<table border=1 cellpadding=50 cellspacing=0><tr><td></td></tr></table>
How can I reduce border thickness?
You can style it like this:
td, th {
border: .1px solid black;
}
JSFIDDLE DEMO
This sample code may help you,
CSS+HTML
table{
border:5px solid blue;
}
caption{
color:wheat;
}
th{
border:2px solid yellow;
background-color:grey;
}
td{
border:3px solid red;
background-color:green;
}
<table border=1 cellpadding=50 cellspacing=0>
<caption>TABLE</caption>
<thead>
<tr><th>H1</th><th>H2</th></tr>
</thead>
<tbody>
<tr><td>1</td> <td>1</td></tr>
<tr><td>1</td> <td>1</td></tr>
</tbody>
<tfoot>
<tr><td colspan="2" >FOOTER</td></tr>
</tfoot>
</table>
Related
For Desktop View table look like this
header 1
Body 1
header 2
Body 2
header 3
Body 3
For Mobile View table look like this
header 1
Body 1
header 2
Body 2
header 3
Body 3
Here, before min width 1110px will consider as mobile view and after this will consider as desktop view:
/* Mobile View*/
table {
border-spacing: 0 1rem;
}
td {
display: block;
border: 1px solid black;
}
/* Desktop View*/
#media screen and (min-width: 1110px) {
td {
display: table-cell;
}
}
<!-- Expand snippet for desktop view -->
<table>
<tr>
<td>Header 1</td>
<td>Body 1</td>
</tr>
<tr>
<td>Header 2</td>
<td>Body 3</td>
<td>Body 3-1</td>
</tr>
<tr>
<td>Header 3</td>
<td>Body 3</td>
</tr>
</table>
I would like to know how can I make my text be aligned and centered the same way in every cell. Because if you see there is a slight difference between the first cell who got a link just under . I would my title to be on the same line without disturbing the responsive side and also the "same size cells" side (thanks to the table layout)
$(document).ready(function(){
$(".toggler").click(function(e){
e.preventDefault();
$('.cat'+$(this).attr('data-prod-cat')).toggle();
});
});
td{
display:block;
width:auto;
border:1px dotted red;
background-color:red;
color:white;
margin-bottom:10px;
}
#media only screen and (min-width: 70em) {
td{
display:table-cell;
border:1px dotted red;
background-color:red;
color:white;
margin-bottom:0px;
}
}
p{font-family:'Varela Round';font-weight:bold;text-align:center;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<table style="table-layout: fixed; width:100%" width="100%" cellpadding="0" cellspacing="5">
<tbody>
<tr>
<td><table>
<tr><td><p>SOCIÉTÉS: 230</p></td></tr><tr><td>+ En savoir plus</td></tr>
<tr class="cat1" style="display:none">
<td>Part CAC 40 : 90</td></tr>
<tr class="cat1" style="display:none">
<td>Part Filiales +100MK€: 120</td></tr>
</tr>
</table>
</td>
<td><p>CONTACT</p></td>
<td><p>EMAIL NOMINATIF</p></td>
<td><p>OPT OUT</p></td>
<td><p>LIGNES DIRECTES/MOBILES</p></td>
</tr>
</tbody>
</table>
What you can do is just the element td to the css to have the text-align property as well:
CSS:
p, td{
font-family:'Varela Round';
font-weight:bold;
text-align:center;
}
Also just a side note you for your js if you want to run your js code when the DOM is loaded jquery docs does not suggest you that document ready function instead they suggest:
JS
$(function() {
$(".toggler").click(function(e){
e.preventDefault();
$('.cat'+$(this).attr('data-prod-cat')).toggle();
});
});
Jquery Docs: https://api.jquery.com/ready/
I use pisa xhtml2pdf to convert an html code to pdf.
I have a problem! pisa did not apply some style to my table such as height and vertical-align
<table style='overflow: hidden;' border='1' cellpadding='0' cellspacing='0'
width="300px">
<tr style="background-color : yellow; height:100px;">
<td style="color: red; height:100px; vertical-align: middle;">
A lot of data
</td></tr></table>
but after converting this html to pdf, height of table tds and vertical-align did not correct!
Please help me.
You need to specify a height (height:100px;) to the table too example for you :
<table style='overflow: hidden; height:100px;' border='1' cellpadding='0' cellspacing='0' width="300px">
<tr style="background-color : yellow;height:100px;">
<td style="color: red; height:100px; vertical-align: middle;">
<!-- A lot of data -->
</td>
</tr>
</table>
I managed to get the height of the cell with this hack:
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="100%" style="border: 1px solid #000"><!-- content goes here --></td>
<td width="0"><br><br><br><br><br></td><!-- special cell to keep the height of the table -->
</tr>
</table>
The second cell is completely invisible and the code above draws a box of 100% in width and the height is defined by amount of <br>s in the second cell or amount of the text in the first cell (whichever comes longer)
I searched for some solutions in PHP/HTML/CSS for this, but nothing worked so far, maybe because in most of those examples were sooo much of code so I got lost in it. Could someone explain to me what I need to do or put some simple sample code here?
Table fixed header using CSS
The simplest would be to position: sticky; your th elements:
.tableFix { /* Scrollable parent element */
position: relative;
overflow: auto;
height: 100px;
}
.tableFix table{
width: 100%;
border-collapse: collapse;
}
.tableFix th,
.tableFix td{
padding: 8px;
text-align: left;
}
.tableFix thead th {
position: sticky; /* Edge, Chrome, FF */
top: 0px;
background: #fff; /* Some background is needed */
}
<div class="tableFix">
<table>
<thead>
<tr><th>H1</th><th>Header 2</th><th>Header 3</th><th>4</th><th>5th Header</th></tr>
</thead>
<tbody>
<tr><td>R1C2</td><td>R1C2</td><td>R1C3</td><td>R1C4</td><td>R1C5</td></tr>
<tr><td>R2C1</td><td>R2C2</td><td>R2C3</td><td>R2C4</td><td>R2C5</td></tr>
<tr><td>R3C1</td><td>R3C2</td><td>R3C3</td><td>R3C4</td><td>R3C5</td></tr>
<tr><td>R4C1</td><td>R4C2</td><td>R4C3</td><td>R4C4</td><td>R4C5</td></tr>
<tr><td>R5C1</td><td>R5C2</td><td>R5C3</td><td>R5C4</td><td>R5C5</td></tr>
<tr><td>R6C1</td><td>R6C2</td><td>R6C3</td><td>R6C4</td><td>R6C5</td></tr>
</tbody>
</table>
</div>
Table fixed header for older browsers
If the browsers you need to support do not encompass the position's sticky value, you can take a look at Fix table head using a bit of Javascript
This code (taken from the link in your comment) is the basic code you need. Next time you need to figure that kind of thing out, just remove segments of code to see what breaks, and leave out everything that doesn't break something that you need.
<html>
<head>
<style>
div.tableContainer {
clear: both;
border: 1px solid #963;
height: 285px; /* html>body tbody.scrollContent height plus 23px for the header */
overflow: auto;
width: 756px /* Remember to leave 16px for the scrollbar! */
}
html>body tbody.scrollContent {
display: block;
height: 262px;
overflow: auto;
width: 100%
}
html>body thead.fixedHeader tr {
display: block
}
html>body thead.fixedHeader th { /* TH 1 */
width: 200px
}
html>body thead.fixedHeader th + th { /* TH 2 */
width: 240px
}
html>body thead.fixedHeader th + th + th { /* TH 3 +16px for scrollbar */
width: 316px
}
html>body tbody.scrollContent td { /* TD 1 */
width: 200px
}
html>body thead.scrollContent td + td { /* TD 2 */
width: 240px
}
html>body thead.scrollContent td + td + td { /* TD 3 +16px for scrollbar */
width: 316px
}
</style>
</head>
<body>
<div id="tableContainer" class="tableContainer">
<table width="100%" cellspacing="0" cellpadding="0" border="0" class="scrollTable">
<thead class="fixedHeader">
<tr class="alternateRow">
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody class="scrollContent">
<tr class="normalRow">
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr class="alternateRow">
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
.........
</tbody>
</table>
</div>
</body>
</html>
I've spent two weeks to find any solution for this, but can't came across. If you float tables after each, there will be a one pixel gap in Microsoft Outlook 2007/2010, which uses the Microsoft Word 2007 HTML render engine:
I'd thank you any working solution – which is not to put the tables in separated <td>'s.
Here is the HTML code for reproduce it:
<html>
<head>
<title>Outlook 2007/2010 horizontal gap</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
table { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
</style>
</head>
<body bgcolor="#000000">
<table bgcolor="#ffff00" align="left"><tr><td> </td></tr></table>
<table bgcolor="#ffff00" align="left"><tr><td> </td></tr></table>
</body>
</html>
What I've tried so far:
display: inline-table; instead of align="left"
searched for other relevant mso- CSS attributes with no luck
removed whitespaces between <table> elements
border-collapse: collapse and border-spacing: 0
adding border: 1px solid red; will remove gap but increase the width of the tables
other display's, padding and margin
non related or deprecated html attributes (rules, frame, border, etc.) on <td> and/or <table>
Fun factor:
If you put these two tables into a table, the extra gap's width will increase to 2 pixels.
Here is an example of how to float tables. You need a combination of border="1" and mso-table css in there to get rid of the 1px gap. See example:
<table bgcolor="#454545" width="100%" border="0" cellpadding="0" cellspacing="0"><tr><td width="5%"></td><td align="center" width="95%">
<div align="left" style="float: left; padding: 0px; margin:0px;">
<table border="1" bordercolor="#959595" cellpadding="0" cellspacing="0" align="left" style="padding: 0px; margin:0px; mso-table-lspace: -1pt; mso-table-rspace: -1pt; ">
<tr>
<td width="318" bgcolor="959595">table 1
</td>
</tr>
</table>
</div>
<div align="left" style="float: left; padding: 0px; margin:0px;">
<table border="1" bordercolor="#959595" cellpadding="0" cellspacing="0" align="left" style="padding: 0px; margin:0px; mso-table-lspace:-1pt; mso-table-rspace: -1pt; ">
<tr>
<td width="318" bgcolor="959595">table 2
</td>
</tr>
</table>
</div>
</td></tr></table>
Try with table border="0" cellspacing="0" cellpadding="0" on each of the two table's. If i understand your issue correct this should solve it :)
We might be SOL here. I am also working on email formats compatible with Outlook 2007/10. If my readings are correct, Outlook 2007/10/13 do not support border-spacing for tables, which is probably what's giving you that spacing issue.
Refs:
Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 1 of 2)
Guide to CSS support in email | Campaign Monitor