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>
Related
This question already has answers here:
Wrap text in <td> tag
(15 answers)
Closed 4 years ago.
A long string of characters contained in a td tag and that string will continue on one line and won't make a line break and I have to scroll towards the right to see the y's on the right side.
How do I make it so that the line containing x will make a line break after filling up 50% of the window so I can see all the x's and y's without scrolling?
<html>
<style>
.table
{
border-width: 1px;
border-style: solid;
border-color: black;
text-align: center;
width: 100%;
overflow-wrap: break-word;
word-wrap: break-word;
}
</style>
<body>
<table border= '1'class = 'table'>
<tr>
<td class = 'left'>Left</td>
<td class = 'right'>Right</td>
</tr>
<tr>
<td>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
</td>
<td>
yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy
</td>
</tr>
</table>
</body>
Use the CSS property:
word-wrap: break-word;
You can add it as a style attribute inside your TD tag, or create a CSS rule for TD in your stylesheet.
All you have to do is add word-break: break-all; to your <td> tags.
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 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>
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>