I have this css style for responsive table. it works as expected in firefox but not in chrome.
In chrome all the text mixed, and it seems that their is a layers.
what is the problem in the code that it works on firefox but not in chrome?
#media only screen and (max-width: 800px) {
/* Force table to not be like tables anymore */
table,
thead,
tbody,
th,
td,
tr {
display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
tr {
border: 1px solid #ccc;
}
td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-right: 50%;
white-space: normal;
text-align: right;
}
td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
right: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
text-align: right;
font-weight: bold;
}
/*
Label the data
*/
td:before {
content: attr(data-title);
};
}
<table>
<thead>
<tr>
<th>title 1</th>
<th>title 2</th>
<th>title 3</th>
<th>title 4</th>
<th>title 5</th>
</tr>
</thead>
<tbody>
<tr>
<td data-title="title1">
text
</td>
<td data-title="title2">
text
</td>
<td data-title="title3">
text
</td>
<td data-title="title4">
text
</td>
<td data-title="title5">
text
</td>
</tr>
</tbody>
</table>
In the preview it seems ok in chrome byt if I create new simple html file with the table in the body it look very bad.
I understand that I need add something to the css or to the body but I dont know what.
This is how it looks like when I make the screen width small then 800px
From the comments it was found you were missing a doctype. A doctype is required of all modern web pages. Without one, you are in "quirks mode" and things like margin and padding and all kinds of things do not follow the W3C box model.
Adding this to the very first line keeps all browsers in "standards mode"
<!DOCTYPE html>
Activating Browser Modes with Doctype
Related
I am trying to get with following data with table.. on mobile view it is not working perfectly: I am trying to achieve to achieve it through bootstrap.
It includes colspan and rowspan too.
HTML as follow:
<div id="no-more-tables">
<table border="1" id="pricing" width="100%" class="table col-sm-12 table-bordered table-striped table-condensed cf">
<tr>
<th colspan="6" scope="col" style="background-color:#CD3E27; color:#FFFFFF;">Baner Packages - Per Month</th>
</tr>
<tr>
<td>The Mesh Premium</td>
<td>The Mesh Eco</td>
<td>The Mesh Ladies<br></td>
<td>The Mesh Impact</td>
<td>The Mesh Moonlighters</td>
<td>The Mesh 9-9</td>
</tr>
<tr>
<td rowspan="2">₹ 7,500/-</td>
<td rowspan="2">₹ 6,000/-</td>
<td rowspan="2">₹ 5,500/-</td>
<td rowspan="2">₹ 5,500/-</td>
<td rowspan="2">₹ 3,500/-</td>
<td>₹ 500/- Non-AC</td>
</tr>
<tr>
<td>₹ 750/- AC</td>
</tr>
<tr>
<td>Includes 24*7 AC</td>
<td>Non-AC</td>
<td>Non-AC</td>
<td>Non-AC</td>
<td>Non-AC</td>
<td>One Day Pass</td>
</tr>
</table>
<div>
CSS as follows:
#media only screen and (max-width: 800px) {
/* Force table to not be like tables anymore */
#no-more-tables table,
#no-more-tables thead,
#no-more-tables tbody,
#no-more-tables th,
#no-more-tables td,
#no-more-tables tr {
display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
#no-more-tables thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
#no-more-tables tr { border: 1px solid #ccc; }
#no-more-tables td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
white-space: normal;
text-align:left;
}
#no-more-tables td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
text-align:left;
font-weight: bold;
}
/*
Label the data
*/
#no-more-tables td:before { content: attr(data-title); }
}
JS fiddle link as above: https://jsfiddle.net/anujoshi10/n0gL4y1g/
http://jsfiddle.net/anujoshi10/5t2syp13/
Does anybody have a solution for this?
For Bootstrap Responsive Table i use this Trick: Work Perfect for me.
Visit Link and try to follow Examples http://elvery.net/demo/responsive-tables/
Hope This Helps!
Thanks
I am trying to create a table which binds its data via Angular. I am tasked with adding a pencil glyphicon to each row to show that the row is editable. The problem I am running into is if I use the bootstrap table-striped class and add the glyphicon glyphicon-pencil class it seems like the row is sitting behind the glyphicon the problem with this is the entire row is clickable but the glyphicon. If I add a style="z-index:-1" the pencil only shows up on the white rows and not the gray ones? I have fought and tried just bout everything I can think of and I cannot seem to get the glyphicon to show on the alternating rows using the z-index which does make the glyphicon clickable. Everything in the row above needs to be clickable. ( I need to be able to click on the pencil and or the grid and have it pass to the next view. )
Can someone help explain how I might be able to make this work correctly? Explain what might be happening? I am totally at a loss at this point.
here is my html code
<div ng-controller="TestCtrl">
<div class="container" ng-hide="editing" style="margin-top:25px;">
<div class="row">
<div id="no-more-tables">
<table ng-show="test.length > 0" class="col-sm-10 col-sm-offset-1 table-bordered table-striped table-condensed cf">
<thead style="text-align:left">
<tr>
<th style="width: 27px;"></th>
<th>Field 1</th>
<th>Field 2</th>
<th>Field 3</th>
<th>Field 4</th>
<th>Field 5</th>
<th>Field 6</th>
</tr>
</thead>
<tbody>
<tr id="{{test.guidfield}}" ng-repeat="testing in test" ng-click="edit($event)" style="cursor:pointer">
<td><div class="glyphicon glyphicon-pencil" style="z-index:-1"></div></td>
<td data-title="Field 1"> {{test.field1}}</td>
<td data-title="Field 2">{{test.field2}}</td>
<td data-title="Field 3">{{test.field3}}</td>
<td data-title="Field 4">{{test.field4}}</td>
<td data-title="Field 5">{{test.field5}}</td>
<td data-title="Field 6">{{test.field16}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
here is the css I have
/* ------- this media query makes tables display vertically on devices 768px or less ------ */
/* Force table to not be like tables anymore */
#no-more-tables table, #no-more-tables thead, #no-more-tables tbody, #no-more-tables th,
#no-more-tables td, #no-more-tables tr {
display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
#no-more-tables thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
#no-more-tables tr {
border: 1px solid #ccc;
}
#no-more-tables td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 60%;
white-space: normal;
text-align: right;
height: 30px;
}
#no-more-tables td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
text-align: left;
font-weight: bold;
}
/* Label the data */
#no-more-tables td:before {
content: attr(data-title);
}
.table-bordered {
border: none;
}
Use this:
<td><i class="glyphicon glyphicon-pencil" style="z-index:1"></i></td>
I did discover that there is something in the ng-click causing this to not work. Thank you all for the help :)
I have a table with rounded corner, and I've put an overflow: hidden CSS command on it so that the corners of the individual cells don't protrude out. It works fine on Chrome, but not on Firefox. Can someone tell me what's wrong?
<style>
table {
border-spacing: 0px;
border: 1px solid #222;
border-radius:8px;-moz-border-radius:8px;-webkit-border-radius:8px;
overflow: hidden;
}
th {
height: 30px;
color: #fff;
background: #222;
text-align: left;
}
tr:nth-child(even) {
background: #245876;
color: #fff;
border: none;
height: 25px;
}
tr:nth-child(odd) {
height: 23px;
}
.pos {
width: 50px;
}
.name {
width: 175px;
}
</style>
<table>
<thead>
<tr>
<th class="pos"></th>
<th class="name">Name</th>
<th class="amount">Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td class="pos">1</td>
<td class="name">Bob</td>
<td class="amount">1324353</td>
</tr>
<tr>
<td class="pos">2</td>
<td class="name">John</td>
<td class="amount">10611</td>
</tr>
<tr>
<td class="pos">3</td>
<td class="name">Bill</td>
<td class="amount">3270</td>
</tr>
<tr>
<td class="pos">4</td>
<td class="name">Brian</td>
<td class="amount">1950</td>
</tr>
<tr>
<td class="pos">5</td>
<td class="name">Dan</td>
<td class="amount">1760</td>
</tr>
</tbody>
</table>
The spec does not require the behavior you are looking for: "The ‘border-radius’ properties do apply to ‘table’ and ‘inline-table’ elements. When ‘border-collapse’ is ‘collapse’, the UA may apply the border-radius properties to ‘table’ and ‘inline-table’ elements, but is not required to." (http://dev.w3.org/csswg/css-backgrounds/#border-radius-tables)
It is possible it simply will not work in Firefox. If that's the case, you could apply border-radius to the header cells (:first-child and :last-child in the header row), but it doesn't always line up properly. A bit of a PITA, I know.
thead tr th:first-child { border-radius:8px 0 0 0; }
thead tr th:last-child { border-radius:0 8px 0 0; }
This might help. How to make CSS3 rounded corners hide overflow in Chrome/Opera
Add where you want:
-moz-overflow: hidden;
I like Pete Scott's answer. But depending on your design, you can create the radius effect on a table by wrapping the table itself in a containing element that has the radius left and right, overflow hidden. Then, position relative the table, and -*px to create the required visual effect. But without seeing the desired end result, I am unable to provide an example.
It's possible to change the effect of overflow on the table element with the following trick: change the display of the table, e.g., to inline-block (this value preserves the shrink-fit width of the table and shouldn't break the layout assuming the table is surrounded by block elements). The resulting rendering will be equivalent as if the table has the div wrapper with border-radius and overflow, which renders in Firefox without problems. Here is the JSbin example.
My aim is to create responsive tables design that look good when viewing on mobiles (width under 480px).
I have the following markup for my table:
<table class="table eventlist">
<thead>
<tr>
<th>Date</th>
<th>Time</th>
<th>Duration</th>
<th>Location</th>
<th>Cost</th>
</tr>
</thead>
<tr>
<td data-title="Code">AAC</td>
<td data-title="Company">AUSTRALIAN AGRICULTURAL COMPANY LIMITED.</td>
<td data-title="Price" class="numeric">$1.38</td>
<td data-title="Change" class="numeric">-0.01</td>
<td data-title="Change %" class="numeric">-0.36%</td>
<td data-title="Open" class="numeric">$1.39</td>
</tr>
</table>
And the following CSS:
/* Landscape phones and down */
#media (max-width: 480px) {
/* Force table to not be like tables anymore */
table, thead, tbody, th, td, tr {
display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
display:none;
}
tr {
border: 1px solid #ccc;
}
td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
white-space: normal;
text-align:right;
}
td:before {
padding-right: 10px;
white-space: nowrap;
text-align:left;
font-weight: bold;
}
/*
Label the data
*/
td:before {
content: attr(data-title);
}
}
My table ends up looking like this:
Would you say this is a good user friendly responsive design?
How can I edit the line:
td:before {
content: attr(data-title);
}
So that it reads the <th> for the column?
Here is a live example: JS Fiddle
Re: Would you say this is a good user friendly responsive design?
The layout of it looks great for a single symbol, and still looks quite good for multiple rows when not in "mobile-mode", however if you plan on having multiple quotes, I think it's going to wind up looking quite cluttered on small screens. You might consider removing the borders between rows and only having lines between quotes to keep it visually cleaner.
Just my .02 from a design perspective.
So I have this code here:
<table>
<tr>
<td width="200px" valign="top">
<div class="left_menu">
<div class="menu_item">
Home
</div>
</div>
</td>
<td width="1000px" valign="top">Content</td>
</tr>
</table>
with the CSS
.left_menu {
background: none repeat scroll 0 0 #333333;
border-radius: 5px 5px 5px 5px;
font-family: Arial,Helvetica,sans-serif;
font-size: 12px;
font-weight: bold;
padding: 5px;
}
.menu_item {
background: none repeat scroll 0 0 #CCCCCC;
border-bottom: 1px solid #999999;
border-radius: 5px 5px 5px 5px;
border-top: 1px solid #FFFFCC;
cursor: pointer;
padding: 5px;
}
It works fine on my browser and I have tested it in every browser both mac and PC, but someone is complaining that the td with the width of 200 keeps changing width. I have no idea what he is talking about. Does anyone know why he or she is seeing the width change on the td?
It should be:
<td width="200">
or
<td style="width: 200px">
Note that if your cell contains some content that doesn't fit into the 200px (like somelongwordwithoutanyspaces), the cell will stretch nevertheless, unless your CSS contains table-layout: fixed for the table.
EDIT
As kristina childs noted on her answer, you should avoid both the width attribute and using inline CSS (with the style attribute). It's a good practice to separate style and structure as much as possible.
<table style="table-layout:fixed;">
This will force the styled width <td>. If the text overfills it, it will overlap the other <td> text. So try using media queries.
Width and/or height in tables are not standard anymore; as Ianzz says, they are deprecated. Instead the best way to do this is to have a block element inside your table cell that will hold the cell open to your desired size:
<table>
<tr>
<td valign="top">
<div class="left_menu">
<div class="menu_item">
Home
</div>
</div>
</td>
<td valign="top" class="content">Content</td>
</tr>
</table>
CSS
.content {
width: 1000px;
}
.left_menu {
background: none repeat scroll 0 0 #333333;
border-radius: 5px 5px 5px 5px;
font-family: Arial,Helvetica,sans-serif;
font-size: 12px;
font-weight: bold;
padding: 5px;
width: 200px;
}
.menu_item {
background: none repeat scroll 0 0 #CCCCCC;
border-bottom: 1px solid #999999;
border-radius: 5px 5px 5px 5px;
border-top: 1px solid #FFFFCC;
cursor: pointer;
padding: 5px;
}
This problem is quite easily solved using min-width and max-width within a css rule.
HTML
<table>
<tr>
<td class="name">Peter</td>
<td class="hobby">Photography</td>
<td class="comment">A long comment about something...</td>
</td>
</table>
CSS
.name {
max-width: 80px;
min-width: 80px;
}
This will force the first column to be 80px wide. Usually I only use max-width without min-width to reign in text that is very occasionally too long from creating a table that has a super wide column that is mostly empty. The OP's question was about setting to a fixed width though, hence both rules together. On many browsers width:80px; in CSS is ignored for table columns. Setting the width within the HTML does work, but is not the way you should do things.
I would recommend using min and max width rules, and not set them the same but rather set a range. This way the table can do it's thing, but you can give it some hints on what to do with overly long content.
If I want to keep the text from wrapping and increasing the height of a row - but still make it possible for a user to see the full text, I use white-space: nowrap; on the main rule, then apply a hover rule that removes the width and nowrap rules so that the user can see the full content when they over their mouse over it.
Something like this:
CSS
.name {
max-width: 80px;
white-space: nowrap;
overflow: hidden;
}
.name:hover {
max-width: none;
white-space: normal;
overflow:auto;
}
It just depends on exactly what you are trying to achieve. I hope this helps someone.
PS As an aside, for iOS there is a fix for hover not working - see CSS Hover Not Working on iOS Safari and Chrome
You can't specify units in width/height attributes of a table; these are always in pixels, but you should not use them at all since they are deprecated.
You can try the "table-layout: fixed;" to your table
table-layout: fixed;
width: 150px;
150px or your desired width.
Reference:
https://css-tricks.com/fixing-tables-long-strings/
You can use within <td> tag css : display:inline-block
Like: <td style="display:inline-block">
try this:
word-break: break-all;
try to use
word-wrap: break-word;
hope this help
I use
<td nowrap="nowrap">
to prevent wrap
Reference: https://www.w3schools.com/tags/att_td_nowrap.asp
Note that adjusting the width of a column in the thead will affect the whole table
<table>
<thead>
<tr width="25">
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tr>
<td>Joe</td>
<td>joe#email.com</td>
</tr>
</table>
In my case, the width on the thead > tr was overriding the width on table > tr > td directly.
I tried with many solutions but it didn't work for me so I tried flex with the table and it worked fine for me with all table functionalities like border-collapse and so on only change is display property
This was my HTML requirement
<table>
<thead>
<tr>
<th>1</th>
<th colspan="3">2</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td colspan="3">2</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td colspan="2">3</td>
</tr>
</tbody>
</table>
My CSS
table{
display: flex;
flex-direction: column;
}
table tr{
display: flex;
width: 100%;
}
table > thead > tr > th:first-child{
width: 20%;
}
table > thead > tr > th:last-child{
width: 80%;
}
table > tbody tr > td:first-child{
width: 10%;
}
table > tbody tr > td{
width: 30%;
}
table > tbody tr > td[colspan="2"]{
width: 60%;
}
table > tbody tr > td[colspan="3"]{
width: 90%;
}
/*This is to remove border making 1px space on right*/
table > tbody tr > td:last-child{
border-right: 0;
}
If you don't set the table to have table-layout: fixed and a certain width, then the table cells will stretch beyond their own width if content is wider. That's what he/she was complaining about.
Use
<table style="table-layout:fixed;">
It will force table to set to 100% width.Then use this code
$('#dataTable').dataTable( {
bAutoWidth: false,
aoColumns : [
{ sWidth: '45%' },
{ sWidth: '45%' },
{ sWidth: '10%' },
]
});
(table id is dataTable and having 3 column)
to specify length to each cell