Both the gray background row and the white background row below are two separate tables. The white background table is the 'overflow-y' property set to scrollable is the number of elements within it exceeds 100px.
CSS for tables:
table {
border-collapse: collapse;
width: 100%;
}
HTML for gray table:
<div style="padding-bottom: 2px">
<table>
<thead>
<tr>
<th>Start Time</th>
<th>End Time</th>
<th>User1</th>
<th>User2</th>
<th></th>
</tr>
</thead>
</table>
</div>
CSS for gray table:
th {
background-color: #E0E0E0;
font-size: 20px;
font-weight: bold;
padding: 8px 0px 8px 0px;
text-align: left;
vertical-align: bottom;
width: 20%;
}
HTML for white table:
<div style="height:95%;overflow:auto">
<table id="modalTable" style="table-layout: fixed; width: 100%" >
<tbody>
<tr ng-repeat-start="value in MaintenanceModeEvents" class="event">
<td>{{'Start Time: MM-dd-yyyy HH:mm:ss'}}</td>
<td>{{'End Time: MM-dd-yyyy HH:mm:ss'}}</td>
<td>{{'User 1'}}</td>
<td>{{'User 2'}}</td>
<td><button type="button"</td>
</tr>
</tbody>
</table>
</div>
CSS for white table:
tr.event {
border-top: 1px solid #808080;
/*border-bottom: 1px solid #808080;*/
font-size: 14px;
padding: 8px 16px;
text-align: left;
}
The header of the gray background table is evenly spaced at 20% (there is a th with nothing in it above view comments) when the white background table's contents doesn't exceed 100px. The issue that I am running into is when the white background table's contents exceeds 100px, the scroll bar's width takes up space in the white background table and the headers from the gray background table no longer align with the white background table as seen above. How can I handle this issue? Any help would be great!
Related
I am working on my website and I have most of the design worked out, shown in the first image. I am trying to make the header row have no space (more accurately, make it look that way by having the image span across the entire row with no spaces.), but still have the elements themselves have space in between them.
Image showing a joined header, but separate body elements:
I am aware of the border-spacing css style, but it has to be applied to the table element, which means it will apply to headers and body elements. This with with a border-spacing set
Image showing what happens to the images when the border-spacing is set on the table:
I did attempt to find an answer before posting and usually I find the answer fairly quickly, but this one seems to be a rare request. I prefer to avoid hacks if possible, but I will use them if its the only way. Also, if possible, I'd like it to be cross-browser capable. (changes to the solution are ok of course, just something that I can make work will all of them.)
I guess code is helpful to show. Here is the html:
<table id="users">
<caption>Point Totals</caption>
<thead>
<tr>
<th>Name</th>
<th>Points</th>
</tr>
</thead>
<tbody>
<tr>
<td>Xogue</td>
<td>64433</td>
</tr>
<tr>
<td>Jesse</td>
<td>104040</td>
</tr>
<tr>
<td>Nanokarp</td>
<td>280</td>
</tr>
<tr>
<td>Brandon</td>
<td>70</td>
</tr>
</tbody>
</body>
and the css:
#users {
border-spacing: 6px;
width: 444px;
float: left;
margin: 20px 90px;
}
#users caption {
background-image: url("_images/points_label.png");
background-size: 200px 35px;
background-position: center center;
background-repeat: no-repeat;
height: 31px;
font-size: 20px;
padding-top: 8px;
}
#users thead {
background-image: url("_images/point_tr_head_back.png");
background-repeat: no-repeat;
}
#users th {
text-align: left;
padding: 9px 30px;
font-size: 20px;
}
#users td {
border: 2px solid #226fdb;
border-radius: 25px;
font-size: 20px;
padding: 18px 5px 2px 25px;
line-height: 15px;
background: #FFFFFFEE;
}
Note: Some of the styles used are likely unnecessary. I've been toying with it for a while and haven't cleaned it up yet.
SOLVED: further down if you would like to see the example. but put simply, wrap the content in a different element (like a span) and move all styles to the new element.
I think you could get there fairly easily with some margins and padding if you can wrap the cell contents in a span (or whatever).
table {
text-align: left;
border-spacing: 0;
}
thead tr {
box-shadow: inset 0 0 12px rgba(0,0,0,0.5);
border-radius: 24px;
}
th {
padding: 6px 1em;
}
th:first-child {
border-radius: 24px 0 0 24px;
}
th:last-child {
border-radius: 0 24px 24px 0;
}
tbody td > span {
display: block;
border: 2px solid blue;
background: aliceblue;
border-radius: 24px;
margin: 6px 6px 0 0;
padding: 0.25em 1em;
}
<table>
<thead>
<tr>
<th>Name</th>
<th>Points</th>
</thead>
<tbody>
<tr>
<td><span>Xogue</span></td>
<td><span>262677</span></td>
</tr>
<tr>
<td><span>Jesse</span></td>
<td><span>17632</span></td>
</tr>
<tr>
<td><span>Nanokarp</span></td>
<td><span>12344</span></td>
</tr>
</tbody>
</table>
One option is to add padding to your CSS for td only and keep rest of the attributes same among td and th as below, also if you can share the used code snippet someone can help better:
td {
padding: 5px;
}
I've a GridView in a scrollable div:
<div style="overflow:auto;height:500px;border:1px solid #c1c1c1; border-collapse:collapse">
<asp:GridView ID="gridID" BorderStyle="None" runat="server" style="margin:0px;" GridLines="None" Width="100%" CssClass="cssGrid">
(...)
</asp:GridView>
</div>
That's rendered like:
<div style="overflow: auto;height:500px;border-collapse:collapse">
<div>
<table class="cssGrid" id="ctl00_MainContent_gridID" style="border-style:None;height:100%;width:100%;border-collapse:collapse;margin:0px;" cellspacing="0">
<tbody>
<tr class="CollapsibleRow">
<td onclick="collapsible('SezioneUno', 'ctl00_MainContent_gridID')" colspan="13" align="center">SezioneUno</td>
</tr>
<tr class="SezioneUno" align="center">
<td style="width:4%;">
<span id="ctl00_MainContent_gdIncongruenti_ctl03_label">142454</span>
</td>
(...)
</tr>
(...)
</tbody>
</table>
</div>
</div>
and CSS like this:
.cssGrid
{
width: 99%;
background-color: #fff;
margin: 10px 10px 10px 10px;
border: solid 1px #525252;
border-collapse: collapse;
word-wrap: break-word;
}
.cssGrid td
{
padding: 2px;
/*padding-right: 10px;*/
border: solid 1px #c1c1c1;
color: #717171;
max-width : 90px;
font-size: 8pt;
}
And now I've a double border only on the left side, because on the right I've the scrollbar. It's possible to eliminate it? I can't eliminate it directly from the div, because I need at least on the bottom of it or while scrolling the grid seems to be appear from nothing. I can't leave only on the bottom of the div because the grid is partially or totally collapsible, then I need always a box around them.. One solution is to set border-left to 0 on grid td, but how I can do that without css or without adding a new css class that change from the first just for the border-left?
Same grid when half collapsed (is in a scrollable div):
I don't want the double border on the left. I want a unique border, like meant to be with border-collapse.. I know I can get it doing border-left: 0px on css on .cssGrid td, but how can I do the same without affect all the cssGrid gridview in the project?
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
I have a table divided into a table head and table body. In order to make the table look a little nicer, the table head has a 2 part background image that gives it rounded corners. The table head does NOT have a border.
The table body does have a border. Therefore, it appears to stick out a little bit beyond the table head on the right and the left.
I want to make the table head (without a border) the same size as the table body (with a border). Any ideas as to how to accomplish this?
The HTML:
<table id="outerTable">
<!-- No border -->
<!-- Smaller than tbody on right and left -->
<thead>
<tr id="outerRow">
<th id="titleTh">Table Title</th>
</tr>
</thead>
<!-- Has border -->
<tbody id="outerBody">
</tbody>
</table>
The CSS:
#outerTable{
margin: 0px auto 0px auto;
font-size: 12px;
background-color: white;
border-collapse: collapse;
}
#titleRow{
background-image: url('/images/vinHead_r.png');
background-repeat: no-repeat;
background-position: right top;
margin-top: 0px;
}
#titleTh
{
font-size: 16px;
background-image: url('/images/vinHead_l.png');
background-repeat: no-repeat;
background-position: left top;
color: #EEEEEE;
padding:5px 5px 5px 20px;
text-align: center;
cursor: pointer;
margin-bottom: 0px;
margin-top: 0px;
}
#outerBody{
border: 2px solid #666666;
}
Assign a border to thead ( if you can ) that matches the main bg of your wrapper, most likely white?
tbody {
border: 2px solid transparent;
}
Edit: I forgot you could set a transparent border. If that works in IE, go ahead.
I need to style a table to have rounded corners.
I'm just looking at how best to go about it:
Normally when I style a div to have rounded corners, I use 2 divs with empty comments at the top and bottom, and apply sizing & background image CSS to them.
The table, however, has internal borders, so I'd have to carefully align the vertical lines in the corner bg images, to match with the true cell borders.
Is this clear so
far?
So I was wondering how others would approach this. I think the best thing I can do is to just use one complete fixed size background image, borders and all, and overlay a borderless table on top. The table will always be the same size after all.
Can anyone think of a better way?
25 ways to do it.... http://www.cssjuice.com/25-rounded-corners-techniques-with-css/
Actually, there are too many ways to do it.
You better make a background image with just the corners, and not the borders.
Apply a class to the top left, top right, bottom left and bottom right cell, to define that the corners-background image should be used.
And style the borders with css. Don't put them in the background image.
In your approach, you'll always gonna end up having the vertical lines in your background image not match the borders of the actual table cells.
Have you tried http://www.roundedcornr.com/?
Do something like this...
XHTML: (sorry had to remove first '<' as it wouldn't let me post it normally, FIX THIS JEFF!)
table id="pricing" border="0" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>Incoming calls</th>
<th>National calls</th>
<th>Calls to US & Canada</th>
<th>Calls to other Phones</th>
<th>Calls to other Countries</th>
<th>SMS text messages</th>
</tr>
</thead>
<tbody>
<tr>
<td>Select</td>
<td>country</td>
<td>from</td>
<td>dropdown</td>
<td>list</td>
<td>above</td>
</tr>
</tbody>
</table>
CSS:
#pricing
{
font-weight:bold;
text-align:center
}
#pricing thead
{
background-image:url("images/pricing_top.gif");
background-position:top;
background-repeat:no-repeat;
padding:10px 0 0 /* replace 10px with the height of pricing_top.gif */
}
#pricing th
{
background-image:url("images/pricing_header_bg.gif");
background-repeat:repeat-y;
border-bottom:1px solid #c3c2c2;
width:100px /* replace 100px with the width of pricing_header_bg.gif */
}
#pricing tbody
{
background-image:url("images/pricing_bottom.gif");
background-position:bottom;
background-repeat:no-repeat;
padding:0 0 10px /* replace 10px with the height of pricing_bottom.gif */
}
#pricing td
{
background-image:url("images/pricing_cell_bg.gif");
background-repeat:repeat-y;
width:100px /* replace 100px with the width of pricing_cell_bg.gif */
}
Only drawback is that you have to create 4 images, but that shouldn't take too long. You'll also need to add a class to the final cell in each row if you want to add that drop shadow on the right and just change it's background-image and width property accordingly.
Playing off of your original idea, you could add a class to each corner cell effectively turning off their respective offending borders. You could then use a full-width background image in the <thead> and <tfoot> elements to account for the rounded corners.
The rest of the cells can have their borders turned on, and the lines will line up correctly.
The only remaining issue is accounting for that blasted drop shadow. That's a different exercise.
A better way would be a 9-grid where you have the background corners, and top, bottom, left and right backgrounds repeating
Your table goes in cell 5
Edit
As some posted in the comments you can not achieve the effect with a 9-grid.
You have to do a 12-grid-system (made up by me right now :)
Live demo
.
Code:
Warning: it's not pretty, but works
<html>
<head>
<style>
.cell1 {background: #f8f8f8 url(images/cell1.gif) no-repeat left top; height: 10px; font-size: 1px;}
.cell2 {background: #f8f8f8 url(images/cell2.gif) repeat-x top; height: 10px; font-size: 1px; border-right: solid 1px #c3c2c2; font-weight:bold; }
.cell3 {background: #f8f8f8 url(images/cell3.gif) no-repeat right top; height: 10px; font-size: 1px;}
.cell4 {background: white url(images/cell4.gif) repeat-y left; border-bottom: solid 1px #c3c2c2; width: 13px; }
.cell5 {background-color: #f8f8f8; padding: 5px; border-right: solid 1px #c3c2c2; font-weight:bold; border-bottom: solid 1px #c3c2c2; }
.cell6 {background: white url(images/cell6.gif) repeat-y right; border-bottom: solid 1px #c3c2c2; width: 18px; }
.cell7 {background: white url(images/cell7.gif) repeat-y left; width: 13px;}
.cell8 {background-color: white; padding: 5px; border-right: solid 1px #c3c2c2; font-weight:normal; }
.cell9 {background: white url(images/cell9.gif) repeat-y right; width: 18px;}
.cell10 {background: white url(images/cell10.gif) no-repeat left bottom; height: 17px;font-size: 1px; }
.cell11 {background: white url(images/cell11.gif) repeat-x bottom; border-right: solid 1px #c3c2c2; height: 17px; font-size: 1px; }
.cell12 {background: white url(images/cell12.gif) no-repeat right bottom; height: 17px;font-size: 1px; }
.lastcolumn, th.lastcolumn, td.lastcolumn {border-right: solid 0px #c3c2c2; }
</style>
</head>
<body>
<table id="pricing" border="0" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th class="cell1"></th>
<th class="cell2"> </th>
<th class="cell2"> </th>
<th class="cell2"> </th>
<th class="cell2"> </th>
<th class="cell2"> </th>
<th class="cell2 lastcolumn"> </th>
<th class="cell3"></th>
</tr>
<tr>
<th class="cell4"> </th>
<th class="cell5">Incoming calls</th>
<th class="cell5">National calls</th>
<th class="cell5">Calls to US & Canada</th>
<th class="cell5">Calls to other Phones</th>
<th class="cell5">Calls to other Countries</th>
<th class="cell5 lastcolumn">SMS text messages</th>
<th class="cell6"> </th>
</tr>
</thead>
<tbody>
<tr>
<td class="cell7"></td>
<td class="cell8">Select</td>
<td class="cell8">country</td>
<td class="cell8">from</td>
<td class="cell8">dropdown</td>
<td class="cell8">list</td>
<td class="cell8 lastcolumn">above</td>
<td class="cell9"></td>
</tr>
<tr>
<td class="cell10"></td>
<td class="cell11"> </td>
<td class="cell11"> </td>
<td class="cell11"> </td>
<td class="cell11"> </td>
<td class="cell11"> </td>
<td class="cell11 lastcolumn"> </td>
<td class="cell12"></td>
</tr>
</tbody>
</table>
</body>
</html>
Note: there are some non-breaking spaces that SO strips from the code. Check out the living demo for more info
Enjoy!