I have a html table:
<table>
<tr> <td>data...</td> <td>data...</td> <td>data...</td> </tr>
</table>
This shows as:
-------------------------
|data...|data...|data...|
-------------------------
which is fine on large screens, but what i want is to break the columns into multiple rows as needed if the screen is small.
So when needed the table would show as:
----------
|data....|
|--------|
|data....|
|--------|
|data....|
----------
Is there a way to do this with something like css?
You can change to display: table-row with media queries Fiddle
#media(max-width: 480px) {
td {
display: table-row;
}
}
<table>
<tr> <td>data...</td> <td>data...</td> <td>data...</td> </tr>
</table>
You can use display:block as for break the column
#media(max-width: 480px) {
td {
display:block;
}
}
<table>
<tr> <td>data...</td> <td>data...</td> <td>data...</td> </tr>
</table>
Make the td as display block and give the width as 100%.
#media screen and (max-width:768px){
th,td { display:block; width:100%; }
}
<table>
<thead>
<tr>
<th>#</th>
<th>#</th>
<th>#</th>
<th>#</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</tbody>
</table>
Related
Okay so I don't even know if this is possible, but I'm trying to accomplish the following design with the use of a <table>:
I know it would be easier to just use a <span> and not even bother with tables, but I figured a <table> would actually make sense here.
This is what I have so far:
table {
text-align: left;
}
<table>
<tr>
<th>Population:</th>
<td>334,300</td>
</tr>
<tr>
<th>Region:</th>
<td>Europe</td>
</tr>
<tr>
<th>Capital:</th>
<td>Reykjavík</td>
</tr>
</table>
You could just set a display:flex on tr and it would do the job. Like so:
tr {
display:flex;
}
<table>
<tr>
<th>Population:</th>
<td>334,300</td>
</tr>
<tr>
<th>Region:</th>
<td>Europe</td>
</tr>
<tr>
<th>Capital:</th>
<td>Reykjavík</td>
</tr>
</table>
You can reset display values for th and td
table {
text-align: left;
}
th,td {display:inline;}
<table>
<tr>
<th>Population:</th>
<td>334,300</td>
</tr>
<tr>
<th>Region:</th>
<td>Europe</td>
</tr>
<tr>
<th>Capital:</th>
<td>Reykjavík</td>
</tr>
</table>
I have a table and I want to summarize some of the values in the columns when I show that table in small devices.
Lets suppose I have this table (Big Devices)
Process Good Bad Rework Total
P1 10 5 2 17
P2 5 3 2 10
Total 5 8 4 17
When I show this table in Small Devices I would like to show this
Process Good Other Total
P1 10 7 17 +
P2 5 5 10 +
Total 5 12 17 +
But I don't want to show the "Other" column in big devices (and I don't want to show the + symbol either). I want that column totally hidden.
I can't find how to achieve that. Any help will be really appreciated.
You can use CSS Media Queries.
Have a look at the snippet below (Use full-screen mode for desktop - to show bad & rework cells):
th, td {
padding: 5px 20px;
}
.visible-mob {
display: none;
background: #FF0;
}
.hidden-mob {
display: table-cell;
background: #38E8F1;
}
/* When Screen Width is >= 767px ( ~ Mobile Devices) */
#media screen and (max-width: 767px) {
.visible-mob {
display: table-cell;
}
.hidden-mob {
display: none;
}
}
<table>
<thead>
<tr>
<th>Process</th>
<th>Good</th>
<th class="hidden-mob">Bad</th>
<th class="hidden-mob">Rework</th>
<th class="visible-mob">Other</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>P1</td>
<td>10</td>
<td class="hidden-mob">5</td>
<td class="hidden-mob">2</td>
<td class="visible-mob">7</td>
<td>17</td>
</tr>
<tr>
<td>P2</td>
<td>5</td>
<td class="hidden-mob">3</td>
<td class="hidden-mob">2</td>
<td class="visible-mob">5</td>
<td>10</td>
</tr>
<tr>
<td>Total</td>
<td>5</td>
<td class="hidden-mob">8</td>
<td class="hidden-mob">4</td>
<td class="visible-mob">12</td>
<td>17</td>
</tr>
</tbody>
</table>
Hope this helps!
This is a ugly hack I applied to achieve temporarily what I want to do. If someone finds a better way please let me know.
HTML
<table class="table">
<thead>
<tr>
<th>Process</th>
<th>Good</th>
<th data-breakpoints="xs">Bad</th>
<th data-breakpoints="xs">Rework</th>
<th class="visible-column visible-column-sm" data-classes="visible-column visible-column-sm" data-visible="false">Other</th>
<th>Total</th>
</thead>
<tbody>
<tr>
<td>P1</td>
<td>10</td>
<td>5</td>
<td>2</td>
<td>7</td>
<td>17</td>
</tr>
<tr>
<td>P2</td>
<td>5</td>
<td>3</td>
<td>2</td>
<td>5</td>
<td>10</td>
</tr>
<tr>
<td>Total</td>
<td>5</td>
<td>8</td>
<td>4</td>
<td>12</td>
<td>17</td>
</tr>
</tbody>
</table>
CSS
.visible-column {
display: none !important;
}
#media screen and (max-width: 767px) {
.visible-column-sm {
display: table-cell !important;
}
}
At the end of the HTML
<script>
$(document).ready(function () {
$('.table').footable();
});
</script>
Here is the Fiddle
https://jsfiddle.net/oL7m7uqq/
I am trying to implement "the unseen column" responsive table technique by assigning a class to a specific column that I can hide if the browser is too narrow.
Truncated dummy html example:
<!doctype html>
<html>
<head>
<style>
table {
width:100%;
background-color:#000;
border-spacing: 1px;
}
table tr {
background-color:#fff;
}
table tr:nth-child(2n+1) {
background-color: #ccc;
}
table tr.Title
{
color:#fff;
background-color:#0e228c;
}
table tr.ColumnHeadings
{
background-color:#e4e0d4;
}
#media only screen and (max-width: 1024px) {
.VolumeCell {display:none;}
}
</style>
</head>
<body>
<table>
<tr class="Title">
<th colspan="6">Stock Prices</th>
</tr>
<tr class="ColumnHeadings">
<th>Code</th>
<th>Company</th>
<th>Price</th>
<th>Change</th>
<th>Change %</th>
<th class="VolumeCell">Volume</th>
</tr>
<tr>
<td>AAC</td>
<td>Austrailian Agricultural Company Ltd</td>
<td>$1.39</td>
<td>-0.01 </td>
<td>-0.36%</td>
<td class="VolumeCell">9,395</td>
</tr>
<tr>
<td>AAD</td>
<td>Ardent Liesure Grp.</td>
<td>$1.15</td>
<td>+0.02 </td>
<td>1.32%</td>
<td class="VolumeCell">56,431</td>
</tr>
<tr>
<td>AAX</td>
<td>Ausenco Ltd.</td>
<td>$4.00</td>
<td>-0.04 </td>
<td>-.99%</td>
<td class="VolumeCell">90,641</td>
</tr>
</table>
</body>
</html>
This is all fine and dandy, except there is a single pixel border or space remaining on the far right of the table in some browsers, specifically Chrome 26. I've tried tweaking the border-collapse and border on many of the table elements in the media query. I've also tried setting negative margins to account for the pixel. Being the anal-retentive person I am, I can't let it go, but I would prefer not to use jQuery to solve this problem.
So how can I account for the missing column?
In case one has similar problem, but for colspan not expanding the whole row, in which case caption makes no sense.
A simple trick is to not hide desired columns with display: none;, but rather do
width: 0px;
This way column will still exist for colspan, all though not visible.
You can't modify the colspan attribute from CSS. If you really needed to change the value, you would have to modify the DOM.
However, instead of the "Title" class that you are using to encompass all the columns, you can use a <caption> element which does exactly what you want. It effectively is the title of the table. See http://www.quackit.com/html_5/tags/html_caption_tag.cfm
Here is a modified version of your markup that uses the caption element. When resized in Chrome it behaves how you would like.
table {
width:100%;
background-color:#000;
border-spacing: 1px;
}
table tr {
background-color:#fff;
}
table tr:nth-child(2n+1) {
background-color: #ccc;
}
caption
{
color:#fff;
background-color:#0e228c;
}
table tr.ColumnHeadings
{
background-color:#e4e0d4;
}
#media screen and (max-width: 1024px) {
.VolumeCell {display:none;}
}
<table>
<caption>
Stock Prices
</caption>
<tr class="ColumnHeadings">
<th>Code</th>
<th>Company</th>
<th>Price</th>
<th>Change</th>
<th>Change %</th>
<th class="VolumeCell">Volume</th>
</tr>
<tr>
<td>AAC</td>
<td>Austrailian Agricultural Company Ltd</td>
<td>$1.39</td>
<td>-0.01 </td>
<td>-0.36%</td>
<td class="VolumeCell">9,395</td>
</tr>
<tr>
<td>AAD</td>
<td>Ardent Liesure Grp.</td>
<td>$1.15</td>
<td>+0.02 </td>
<td>1.32%</td>
<td class="VolumeCell">56,431</td>
</tr>
<tr>
<td>AAX</td>
<td>Ausenco Ltd.</td>
<td>$4.00</td>
<td>-0.04 </td>
<td>-.99%</td>
<td class="VolumeCell">90,641</td>
</tr>
</table>
I have used table for display the list of records. It have lot of rows and columns. If I print this table the table heading display in first page. After the first page the headings are not display. I found many website from Google search. I have followed that method, but I could not achieve. I could not realize the mistake. This is my css.
<style type="text/css" media="print" >
table td {
border-bottom:1px solid gray;
}
th {
font-family:Arial;
color:black;
background-color:lightgrey;
}
thead {
display:table-header-group;
}
tbody {
display:table-row-group;
}
</style>
This my Html code:
<table border="0" cellpadding="2" cellspacing="0">
<thead>
<tr>
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>First Name 1</td>
<td>Last Name 1</td>
</tr>
</tbody>
</table>
Anyone can help me? Thanks.
Try adding this in your CSS :
#media print
{
thead {display: table-header-group;}
}
Here is the sample
First, you have to explicitly define the table head and table body:
<table>
<thead>
<tr>
<th>First Heading</th>
<th>Second Heading</th>
<th>Third Heading</th>
</tr>
</thead>
<tbody>
<tr>
<td>foo</td>
<td>bar</td>
<td>baz</td>
</tr>
. . .
<tr>
<td>fim</td>
<td>fam</td>
<td>fom</td>
</tr>
</tbody>
</table>
If you want printing to work, you need to have an explicit declaration. Next, you just need a single line of CSS to get things going:
#media print {
thead {display: table-header-group;}
}
This will force most browsers to repeat the contents of thead node on every printed page.
I want to hide the border for a specific rows of a table.How to do it?
Any Idea?
Sample code is Highly Appreciated.
Use the CSS property border on the <td>s following the <tr>s you do not want to have the border.
In my example I made a class noBorder that I gave to one <tr>. Then I use a simple selector tr.noBorder td to make the border go away for all the <td>s that are inside of <tr>s with the noBorder class by assigning border: 0.
Note that you do not need to provide the unit (i.e. px) if you set something to 0 as it does not matter anyway. Zero is just zero.
table, tr, td {
border: 3px solid red;
}
tr.noBorder td {
border: 0;
}
<table>
<tr>
<td>A1</td>
<td>B1</td>
<td>C1</td>
</tr>
<tr class="noBorder">
<td>A2</td>
<td>B2</td>
<td>C2</td>
</tr>
<tr>
<td>A3</td>
<td>A3</td>
<td>A3</td>
</tr>
</table>
Here's the output as an image:
I use this with good results:
border-style:hidden;
It also works for:
border-right-style:hidden; /*if you want to hide just a border on a cell*/
Example:
<style type="text/css">
table, th, td {
border: 2px solid green;
}
tr.hide_right > td, td.hide_right{
border-right-style:hidden;
}
tr.hide_all > td, td.hide_all{
border-style:hidden;
}
}
</style>
<table>
<tr>
<td class="hide_right">11</td>
<td>12</td>
<td class="hide_all">13</td>
</tr>
<tr class="hide_right">
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
<tr class="hide_all">
<td>31</td>
<td>32</td>
<td>33</td>
</tr>
</table>
Here is the result:
Add programatically noborder class to specific row to hide it
<style>
.noborder
{
border:none;
}
</style>
<table>
<tr>
<th>heading1</th>
<th>heading2</th>
</tr>
<tr>
<td>content1</td>
<td>content2</td>
</tr>
/*no border for this row */
<tr class="noborder">
<td>content1</td>
<td>content2</td>
</tr>
</table>
You can simply add these lines of codes here to hide a row,
Either you can write border:0 or border-style:hidden; border: none or it will happen the same thing
<style type="text/css">
table, th, td {
border: 1px solid;
}
tr.hide_all > td, td.hide_all{
border: 0;
}
}
</style>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr class= hide_all>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
running these lines of codes can solve the problem easily