I would like the span element width to be the rest of td's width.
Here is a very simple example. In other words, now I have some code, but the span element will be too wide. It will go over the latest td element.
Here is the HTML code which has some basic CSS code, too. I'm not allowed to modify the basic strucuture of this table. All I want to do is modifying my span element.
<table style="width:100%;">
<tr>
<td style="width:30px;">1</td>
<td>Go <span style="display:inline-block;width:100%;background-color:black;">to...</span></td>
<td>#</td>
</tr>
</table>
How should I modify the span element to get it use the rest of the td but no more?
this could be achieved using flex box
td div {
display: flex;
}
td span {
flex-grow: 1;
}
<table style="width:100%;" border=1>
<tr>
<td style="width:30px;">1</td>
<td>
<div>
Go <span style="background-color:black;">to...</span>
</div>
</td>
<td>#</td>
</tr>
</table>
Here is my own solution to my problem. This is the best way which I was able to find out.
<table style="width:100%;">
<tr>
<td style="width:30px;">1</td>
<td style="padding-left:65px;">Go to...</td>
<td>#</td>
</tr>
</table>
Related
If I have the HTML below I want to find a single CSS class definition that will effect the outermost table but not the sub tables. Without changing the HTML can I get .myClass to do this:
I was playing around with the not selector but couldn't get it to work.
.myClass tr td div :not(table) {
background-color: red;
}
<body>
<div class="myClass">
<table>
<tr>
<td>
<div>My</div>
</td>
</tr>
<tr>
<td>
<div>
<table>
<tr>
<td>Hello</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td>
<div>
<table>
<tr>
<td>World</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</body>
No you cannot do this with pure css without changing your html.
You can do it with jQuery or by simply putting the 'My' inside of a span, because text is not accesible by a selector.
But in all fairness your question was partly answered by #Pangloss. To access the outer table, just use >. Your problem lies in the fact that on the 2nd and 3rd rows, you still have the outer table present. Your question should actually be something like "What's the selector for an element that does not have a specific child type", and then you would find that you cannot target a parent of an element on css yet.
The first cell is the first div inside the first tr, we can target this using the following:
tr:first-child div:first-child{
background:red;
}
Full snippet:
tr:first-child div:first-child {
background: red;
}
<body>
<div class="myClass">
<table>
<tr>
<td>
<div>My</div>
</td>
</tr>
<tr>
<td>
<div>
<table>
<tr>
<td>Hello</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td>
<div>
<table>
<tr>
<td>World</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</body>
I got a table with a couple <td>:
<table>
<tr>
<td>First</td>
<td>Second</td>
<td style="padding:20px;">
<div>
Third
</div>
</td>
</tr>
</table>
What I want to do is to place the "Third" <td> (with the div) to the right side of the table and the "First" and "Second" <td> should stay left.
Style with float:right; didn't work for me...
You need to make your table's width 100%, then control the widths of your first 2 columns, and finally right-align your third column.
http://jsfiddle.net/25Mqa/1/
<table>
<tr>
<td class="first">First</td>
<td class="second">Second</td>
<td class="third">Third</td>
</tr>
</table>
CSS:
table { width:100%; }
.first, .second { width:50px; }
.third { text-align:right; }
The problem is that the width of a <table> is determined by its content, by default. If you want the <table> to span 100% width (of its containing block) like block-level elements do, you can either add table-layout: fixed; and then specify your width - or just give it a width, depending on what you're after, e.g.
table {
width: 100%;
}
http://jsfiddle.net/QEaAd/2/
try add style="text-align:right;"
<table>
<tr>
<td>First</td>
<td>Second</td>
<td style="padding:20px; text-align:right;">
<div>
Third
</div>
</td>
</tr>
</table>
Only if you have 2 divs one near other:
<div id="fr">div1</div>
<div id="fr">div2</div>
you can float them right:
<style>
#fr{float:right;}
</style>
<table style="width: 100%;">
<tr>
<td>First</td>
<td>Second</td>
<td style="padding:20px; display: block; float: right;">
<div>
Third
</div>
</td>
</tr>
</table>
http://jsfiddle.net/pbesD/
I believe this does what you want, however from what I understand, floating table elements will cause problems in versions of Internet Explorer <8
I dont know what you are trying to do with tables and divs? But I normally use this for emailers.
I use the align attribute for td's. This helps a lot in making sure your layout looks the way you want. And it works in all browsers :)
FIDDLE
HTML:
<table width="100%">
<tr>
<td>First</td>
<td>Second</td>
<td style="padding:20px;" align="right">
<div>
Third
</div>
</td>
</tr>
</table>
In Bootstrap 5.2 you can add .text-start and .text-end to your text class to align elements inside a table.
I have the following code :
<table>
<tr>
<td>
<!-- Black Box -->
</td>
<td>
<!-- Search Box -->
</td>
</tr>
<tr>
<td rowspan='2'>
<table>
<tr><td class='thead'>Statut</td></tr>
<tr><td><!-- THE TD TO RESIZE --></td></tr>
</table>
</td>
<td>
<table>
<tr><td class='thead'>Annonce</td></tr>
<tr><td><!-- Don't Care --></td></tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr><td class='thead'>Message</td></tr>
<tr><td><!-- Don't Care --></td></tr>
</table>
</td>
</tr>
</table>
It renders like this: http://imageshack.us/a/img689/3140/tbi4.png
But I would like the orange cell under "Statut" to fill the whole height of the containing TD. I tried to apply a height property to the table, the TR and the TD, but nothing happens, be it in HTML with height=... or in CSS with style='height: ...
Here's the render I'd like to have: http://imageshack.us/a/img560/3809/dy4w.png
One could argue that tables are not the best choice here, as they should only be used for tabular data, not for layout.
However, if you decide to go with tables, you should not nest them, but work with rowspan to achieve the deisred result. The HTML would look like this:
<table>
<tr>
<td>
<!-- Black Box -->noir</td>
<td>
<!-- Search Box -->cherche</td>
</tr>
<tr>
<td class='titre'>Statut</td>
<td class='titre'>Annonce</td>
</tr>
<tr>
<td rowspan='3'>lorem ipsum statut</td>
<td>lorem ipsum annonce</td>
</tr>
<tr>
<td class='titre'>Message</td>
</tr>
<tr>
<td>lorem ipsum message</td>
</tr>
</table>
This way you do not need to bother with heights in css (which can be a pain).
I set up a small example to demonstrate: http://jsfiddle.net/qJQdj/
Try height:100%; to make it takes the total height.
Employing min-height will do the trick for you here if you are content aware of the table.
CSS
td[rowspan="2"] > table{
min-height:80px;
}
http://jsfiddle.net/LWxK4/
changed code : convert your code to:
<table>
<tr >
<td class='thead' rowspan='2'>Statut</td>
<td class='thead'>Message</td>
</tr>
<tr><td class='thead'>Message</td></tr>
</table>
it will give you what u want for sure
EDIT: this is the concept of using rowspan.now you should use it to build your own webpage.there are few more cells as well in your code.you can do that using nested tables.my answer shows how to use rowspan properly
If you really wanted nested tables...
You can force a nested table/table-cell to have a minimum height as follows:
Add a class .statut-panel to your inner table:
<table class="wrap">
<tr>
<td>Black Box</td>
<td>Search Box</td>
</tr>
<tr>
<td rowspan='2'>
<table class="statut-panel">
<tr>
<td class='thead'>Statut</td>
</tr>
<tr class="full-size">
<td>THE TD TO RESIZE...</td>
</tr>
</table>
</td>
<td>
<table class="annonce-panel">
<tr>
<td class='thead'>Annonce</td>
</tr>
<tr>
<td>Don't Care</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td class='thead'>Message</td>
</tr>
<tr>
<td>Don't Care</td>
</tr>
</table>
</td>
</tr>
</table>
and apply the following CSS:
table td {
background-color: lightgray;
vertical-align: top;
}
table.statut-panel {
border: 1px solid blue;
height: 200px;
}
table.statut-panel .full-size td {
border: 1px dotted blue;
height: 100%;
}
Give the inner table .status-panel a fixed height, say 200px. CSS will treat this as a minimum height so you won't get into any overflow issues as the table content expands.
For the table cell that you want to expand, table.statut-panel .full-size td, simply set the height to 100%, and it will expand in height to at least 200px (or whatever is a good minimum height).
See demo at: http://jsfiddle.net/audetwebdesign/7L3Bc/
I've two tables like below:
<table width="100px">
<tr>
<td>
<table width="100%">
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
<td>Five</td>
<td>Six</td>
<td>Seven</td>
<td>Eight</td>
<td>Nine</td>
<td>Ten</td>
</tr>
</table>
</td>
</tr>
</table>
When I run this my internal table is exceeding parent table width (100px) because it is having more TDs. How can restrict this?
All values are coming in the same row and it is going out of reserved area (100px). Is there any way to display values in multiple rows with the above code?
You cannot do this with <table> layout. Even adding the following CSS will not fix it, instead the cells are just rendered over each other.
table {
table-layout:fixed;
overflow:hidden;
}
The HTML table column element <col> element will also not really help since it will only apply to the first <td>.
One approach would be to use a non-<table> layout instead, for example:
HTML
<table>
<tr>
<td>
<div id="container">
<div>One</div><div>Two</div><div>Three</div><div>Four</div><div>Five</div>
<div>Six</div><div>Seven</div><div>Eight</div><div>Nine</div><div>Ten</div>
</div>
</td>
</tr>
</table>
CSS
table {
width:100px;
}
#container div {
display:inline-block;
}
See demo of how <col> does not work and how the <div> layout wraps at 100px.
U can't fit 10 words like this in 100px with normal size font.
I think you might want to use <tr></tr>(row) tags for each word instead of td(cell)
Or you really want the 100px row to be split in 10 cells and to contain those words? (I think if might be somehow possible but u won't see the words :D or maybe if you used little font and somehow made the words to be rotated about 90 degrees...)
This Q/A Word-wrap in an HTML table might help u in that case.
add a class to table and set this css code
table.restrict { table-layout:fixed; }
table.restrict td { overflow: hidden; }
It will help you:
Fixed Table Cell Width
Use style attr 'table-layout:fixed' with table
or try this:
// div css
<style>
.frame {
overflow-x:scroll;
width:100px;
}
</style>
<div class='frame'>
<table width='100px'>
<tr>
<td>
<table width='100%'>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
<td>Five</td>
<td>Six</td>
<td>Seven</td>
<td>Eight</td>
<td>Nine</td>
<td>Ten</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
I made a table with some text and it iss automatically centering it vertically. Example:
How can I make the text to go from the top? I mean the normal way, you know.
vertical-align
The vertical-align CSS property specifies the vertical alignment of an
inline or table-cell element.
html
<table class="someClass">
<tr>
<td>Hello World</td>
</tr>
</table>
css
.someClass td { vertical-align: top; }
try this:
<table>
<tr>
<td valign="top">
....
</td>
</tr>
</table>