A B
A B
A X
A B
I've got table inside a containing block that has a set width of 400px. When the browser width is less than 421px the containing block width switches to 95%. Cells of type "A" and "B" contain simple text. There is a single cell that contains a link with white-space:nowrap applied.
I need the table to self determine its dimensions (so no table-layout:fixed-width), but not take in to account cell "X" when determining the width of the second column. It is ok to hide the content of cell "X" that doesn't fit.
I have tried applying width:100% with overflow hidden on all manner of different elements, to no avail.
html
<table>
<tr>
<th style="vertical-align:bottom;">
<figure>
<div class="minical-mo">month</div>
<div class="minical-da">date</div>
</figure>
</th>
<td style="vertical-align:bottom;"><h2>summary</h2></td>
</tr>
<tr>
<th class="space">Calendar</th>
<td class="space"></td>
</tr>
<tr>
<th class="space">Date</th>
<td class="space">date</td>
</tr>
<tr>
<th>Start Time</th>
<td>time</td>
</tr>
<tr>
<th>End Time</th>
<td>time</td>
</tr>
<tr>
<th>Location</th>
<td>location</td>
</tr>
<tr>
<th class="space">Attachment</th>
<td class="space link">link</td>
</tr>
<tr>
<th class="space">Description</th>
<td class="space">long desc</td>
</tr>
</table>
scss
table{
width:100%;
margin:1em 0;
th{
color:$c_modal;
text-align:right;
font-size:.85em;
padding: 3px;
vertical-align:top;
&.space{
padding-top:1em;
}
figure{
float:right;
margin:0;
.minical-mo{
width:60px;
height:15px;
font-size:11px;
line-height:15px;
text-align:center;
color:white;
background-color:$c_main;
}
.minical-da{
width:60px;
height:45px;
font-size:35px;
line-height:45px;
text-align:center;
color:black;
background-color:white;
border-radius:0 0 5px 5px;
-webkit-box-shadow: 0 5px 12px -5px $c_dk;
-moz-box-shadow: 0 5px 12px -5px $c_dk;
box-shadow: 0 5px 12px -5px $c_dk;
}
}
}
td{
color:black;
font-size:.85em;
padding:3px;
vertical-align:top;
&.space{
padding-top:1em;
}
p{
margin-bottom:1em;
line-height:1.2;
}
&.link{
overflow:hidden;
a{
width:100%;
overflow:hidden;
}
}
}
}
Make sure the following are applied to the .link element.
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
max-width:100px; /* adjust as needed */
This will cut off the link if it's too long, filling in with ... at the end.
I handled a similar problem by limiting the actual size of the text string and then putting the full text in the tool tip. The blog post is HERE.
Got it
td.link{
overflow:hidden;
}
td.link a{
display:block;
overflow:visible;
max-width:10px;
white-space:nowrap;
}
Place a max width on the anchor to keep it from determining the column size for its column, then allow its overflow to be visible. Then hide overflow on the table cell.
The only bad thing about this solution is that text-overflow:ellipsis doesn't work on it because we are hiding block overflow and not text overflow. A sacrifice I am comfortable with in this instance.
If anyone can figure out a way to get text-overflow working with this let me know.
Thanks for everyone's suggestions.
Related
I wouldn't call myself a programmer at all but I do know some basic css. However, I have trouble creating a table that looks something like on this site: https://www.slotsia.com.
What I wish to achieve is that row numbering to the far left together with that corner graphic. I'm sure it's all done with css and the numbering is probably automatic.
I use wordpress and the plugin tablepress to create tables.
I did try to put the following code in the css which achieved the numbering, even if it starts wrong with 0 instead of 1.
.tablepress-id-4 {
counter-reset: rowNumber;
}
.tablepress-id-4 tr:not(:first-child) {
counter-increment: rowNumber;
}
.tablepress-id-4 tr td:first-child::before {
content: counter(rowNumber);
min-width: 1em;
margin-right: .5em;
}
Also, the larger text doesn't look like normal fonts? I'm thinking it's font awesome or google fonts or something? How to use that?
Thank you
Here's a fiddle demonstrating to accomplish that index thing in the cell : https://jsfiddle.net/59wfkzgs/2/
HTML
<table>
<tr>
<td>
<span class="index">1</span>
ABC
</td>
<td>
ABC
</td>
</tr>
<tr>
<td>
<span class="index">2</span>
ABC
</td>
<td>DEF</td>
</tr>
<tr>
<td>
<span class="index">3</span>
ABC
</td>
<td>DEF</td>
</tr>
</table>
CSS
table, tr, td {
font-family:"Segoe UI";
padding:20px;
border:solid 1px black;
border-collapse:collapse;
}
td {
text-align:center;
position:relative;
min-width:150px;
}
.index {
position:absolute;
top:-2px;
left:-2px;
width:30px;
height:30px;
border:solid 1px black;
border-radius:0 0 100px 0;
background-color:rgba(0,0,0,.5);
}
You are able to do -almost- everything you want in a table's cells, so you can stylish it in any way you want to. Do not fear of doing so :).
Hope it helps.
Dylan
I'm having some trouble formatting a table! I want to make a table in which all the cells stay at an equal width and height. In other words, so they don't overflow.
I can make it so that the cells don't overflow in the x-axis, by using table-layout:fixed, but I'm having some trouble preventing the cells overflowing in the y-axis. I want this to be hidden as well, but for some reason the CSS isn't co-operating with me!
I won't go into detail, as this isn't related to the problem I'm having, but I'm not looking for an absolute solution such as having a height:50px style. I would like a general solution to prevent this overflow, please!
I've provided some sample CSS and HTML below. Please let me know if you need any clarifications! http://jsfiddle.net/pdtua295/1/
CSS
table.pztable {
border-collapse:separate;
table-layout:fixed;
overflow:hidden;
margin:0px;
width:100px;
height:100px;
}
td.pzcol {
border:1px dotted #2F2F2F;
padding: 0px 2px 5px 2px;
text-align:center;
vertical-align:middle;
}
span.pztext {
font-family:Tahoma;
}
HTML
...
<table class="pztable">
<tbody>
<tr>
<td class="pzcol">
<span class="pztext">Alice</span>
</td>
<td class="pzcol">
<span class="pztext">Bob</span>
</td>
</tr>
<tr>
<td class="pzcol">
<span class="pztext">S<br>T<br>R<br>E<br>T<br>C<br>H</span>
</td>
<td class="pzcol">
<span class="pztext">This won't stretch horizontally.</span>
</td>
</tr>
</tbody>
</table>
...
try this
word-wrap: break-word;
this will break even word
[I edited your code][1]
[1]: http://jsfiddle.net/pdtua295/1/
This isn't tested, but in the CSS for the td your should add height: 50px; white-space: nowrap; overflow: ellipsis; that should do it.
Replace your css with
give min width and max-width to table td like
`table.pztable{
border-collapse:separate;
table-layout:fixed;
overflow:hidden;
margin:0px;
}
td.pzcol{
border:1px dotted #2F2F2F;
padding: 0px 2px 5px 2px;
text-align:center;
min-width:150px;
max-width:150px;
}`
Im creating a responsive table which contains a vertical divider. I want that divider to move along with the text according to all screen sizes. left and right td are responsive just the divider is creating problem.
The CSS is
.divider{
position: absolute;
left:30.5%;
top:6%;
bottom:25%;
border-left:2px solid #333;
overflow:hidden;
}
and the related html is
<table width="100%">
<tr>
<td>
this is test
</td>
<td><div class="divider"></div></td>
<td>
This is test2
</td>
</tr>
</table>
The problem is when I change the position from absolute to anything else in css it hides the divider.
In your case....its happening because i feel that your are giving position only to the div and not the containing <td>....give this parent td a position first
add height, width to html,body and your are good to go...
solution
CSS
html, body {
height:100%; /* added */
width:100%;/* added */
}
.divider {
position: relative; /* changed*/
left:30.5%;
top:6%;
bottom:25%;
border-left:2px solid #333;
overflow:hidden;
}
td.r {
position:absolute;/* added */
height:100%;/* added */
width:100%;/* added */
}
HTML
<table width="100%" border=1>
<tr>
<td>this is test</td>
<td class="r"> <!-- notice the added class-->
<div class="divider"></div>
</td>
<td>This is test2</td>
</tr>
</table>
EDIT
A much simpler and cleaner way to create divider is to use td only for divider, not the div....check this demo
Remove the div creating the divider and instead, add the divider class to td itself!
<table width="100%" border=0>
<tr>
<td>this is test</td>
<td class="divider"></td>
<td>This is test2</td>
</tr>
</table>
CSS
td {
text-align:center
}
td.divider {
position:absolute;
height:100%;
width:1px;
border:1px solid #000;
background:#000;
}
I have a table with two columns. The width of the 2 columns are set and should not be modified. The first column contains 2 spans standing side by side. The content of the first span has a variable length. The second span also. What I would like to do is to hide the overflow of the second span when the content hits the border. I tried several things but I do not manage to find a solution. Hope someone can help. Thank you in advance for your replies. Cheers. Marc.
http://cssdesk.com/eAN3d
My HTML:
<table>
<tr>
<th>th1</th>
<th>th2</th>
</tr>
<tr>
<td>
<span>Paul</span>
<span class="hide-overflow">Some text with no overflow</span>
</td>
<td>txt</td>
</tr>
<tr>
<td>
<span>Emmanuelle</span>
<span class="hide-overflow">The overflow of this text string has to be hidden.The td has to be only one line and the width should not be extended.</span>
</td>
<td>txt</td>
</tr>
</table>
My CSS:
table{
width:400px;
border-spacing: 0px;
border-collapse: collapse;}
th,td{
border:1px solid black;}
td:first-child{
width:350px;}
td:last-child{
width:50px;}
.hide-overflow{
background-color:yellow;
}
I'm not incredibly happy with this, but it does seem to work in Firefox. jsFiddle
table{
width:400px;
border-spacing: 0px;
border-collapse: collapse;
table-layout:fixed;
}
th,td {
border:1px solid black;
white-space: nowrap;
}
th:first-child, td:first-child{
width:350px;
overflow:hidden;
}
th:last-child, td:last-child{
width:50px;
}
.hide-overflow{
background-color:yellow;
}
span.hide-overflow {
white-space:nowrap;
}
This is the result:
Is it not possible to style a <table> and its <tr> <td> using css classes?
For example:
<table class="calendar_table">
<tr>
<td>
<h2>Datum</h2>
</td>
<td>
<h2>Event</h2>
</td>
<td>
<h2>Type</h2>
</td>
</tr>
</table>
Then using something like this CSS:
.calendar_table {
width:880px;
}
.calendar_table tr {
margin:0;
padding:4px;
}
It is possible, it should work properly!
Here is an example
Have fun, you can do whatever you want! I don't recommend using <table>though, unless it is used to present structured data that is meant to be in a table. If it is to draw a layout, use <div> and CSS!
As Aleks wrote, I would define css for the table itself too. But no nested brackets in css definition like: table.custom_class { ... td, th { ... } }.
<table class="custom_class">
<tr>
<th>First name</th>
<th>Last name</th>
</tr>
<tr>
<td>Giovanni</td>
<td>Rovelli</td>
</tr>
<tr>
<td>Roland</td>
<td>Mendel</td>
</tr>
</table>
The following CSS example can be used:
table.custom_class {
border:solid 5px #006CFF;
margin:0px;
padding:0px;
border-spacing:0px;
border-collapse:collapse;
line-height:22px;
font-size:13px;
font-family:Arial, Verdana, Tahoma, Helvetica, sans-serif;
font-weight:400;
text-decoration:none;
color:#0018ff;
white-space:pre-wrap;
}
table.custom_class th {
padding: 20px;
background-color:#98dcff;
border:solid 2px #006CFF;
}
table.custom_class td {
padding: 20px;
border:solid 1px #006CFF;
}
table.custom_class tr {
margin:0;
padding:4px;
}
You can see it in action https://jsfiddle.net/16L9h2ft/
Yes, it's possible. What you have is working to some extent (with tweaks).
To style the td, use:
.calendar_table td {
}
Or:
.calendar_table tr td {
}
will also work.
For setting attributes such as borders, colors, and sizes this is the cleaner way to do it, over embedding that information in HTML.
This approach is great with data tables where the information naturally should be presented in a table. If you are laying out data use more semantically correct tags such as <div> and <span>.
The answers above are either old, or not answered properly, as they are ignoring the styling of the table itself and not just td or th etc. elements.
If we would have a table like this:
<table class="custom_class">
<thead>
<tr>
<th>header 1</th>
<th>header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>row value 1</td>
<td>row value 2</td>
</tr>
</tbody>
</table>
Then in .css we should put:
table.custom_class {
border: 1px solid black;
td, th {
color: blue;
}
}
Table rows don't take padding, TDs do.
Change your style to:
.calendar_table td {
margin:0;
padding:4px;
}
Tables expand if necessary to let content fit
As far as I know, table rows do not have margin or padding
These layout rules apply no matter how you set it.
Nice looking green table theme :
https://jsfiddle.net/sujayun/qwsLk3aL/
table.namTblCls
{
color:purple;
border: #004400 4px solid;
border-collapse: collapse;
font-size:16px;
}
table.namTblCls th
{
text-align: center;
color:yellow;
background-color:#008800;
border: #004400 2px solid;
padding: 20px;
}
table.namTblCls td
{
text-align: center;
padding: 20px;
border: #004400 1px solid ;
border-right-width: 2px;
border-left-width: 2px;
}
table.namTblCls tr:nth-child(odd)
{
background-color: #DDFFDD;
}
table.namTblCls tr:nth-child(even)
{
background-color: #BBFFBB;
}