I want the picture from div to be under the table so that after hover the content shows, the problem is i can't change html all elements should be the same size and be displayed as inline blocks
td {
display: block!important;
visibility: hidden
}
.hide:hover:nth-child(n)+table:nth-child(n) tbody tr td.td1 {
visibility: visible!important
}
.hide{width:100px; height:200px; display:inline-blocks;
}
tbody{width:100px; height:200px; display:inline-blocks;
}
<html>
<body>
<table>
<tbody>
<tr>
<td class="td1"></td>
<td class="td1"></td>
</tr>
</tbody>
</table>
<div id="more49042" class="hide" style="background-image:url("https://webkit.org/demos/srcset/image-src.png") !important">
</div>
<table>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<div id="more5343" class="hide" style="background-image:url("https://assets.crowdsurge.com/datacapture/example/img/example_logo.png") !important">
</div>
</body>
</html>
Here is what I think you are trying to do. Please note that I added the html entity to ensure that the div shows up. You could probably just set a min-height on the element.
How the CSS works:
Since there will never be a case that I can think of where hovering over something that technically doesn't exist in the DOM is going to work, you want to look for a hover on the table, and then change the visibility of the .hide element after it.
.hide {
display: none;
}
table:hover+.hide {
display: inherit !important;
}
<table>
<tbody>
<tr>
<td>Lorem.</td>
<td>Quaerat.</td>
</tr>
</tbody>
</table>
<div class="hide" style="background-image:url('//placehold.it/300x300')"> </div>
Related
I have a table with two columns. One has some property names and the other has descriptions, including pre tags. I need the pre tags to not wrap and instead scroll to see overflow. I also need the first column to be sized based on the largest property name. I can't get the two to play nicely with each other.
For example I can get the first column to size based on the content but the pre won't scroll:
.main-content {
max-width: 800px;
border: 1px solid red;
}
pre {
overflow: auto;
}
<div class="main-content">
<table border="0" class="config">
<thead>
<tr>
<th>Property</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="config-name">name</td>
<td class="config-description">
<p>Foo bar talking about some random things related to our code here in the paragraph:</p>
<pre>// some really long code section here that should have its own scroll bar (and not wrap) some really long code section here that should have its own scroll bar (and not wrap)</pre>
</td>
</tr>
</tbody>
</table>
</div>
I can also get the pre to scroll but then I can't get the first column to resize:
.main-content {
max-width: 800px;
border: 1px solid red;
}
table {
table-layout: fixed;
width: 100%;
}
th:first-of-type {
width: 15%; /* Faking it here - the size of the first td/th should be based on the largest */
}
pre {
overflow: auto;
}
<div class="main-content">
<table border="0" class="config">
<thead>
<tr>
<th>Property</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="config-name">name</td>
<td class="config-description">
<p>Foo bar talking about some random things related to our code here in the paragraph:</p>
<pre>// some really long code section here that should have its own scroll bar (and not wrap) some really long code section here that should have its own scroll bar (and not wrap)</pre>
</td>
</tr>
</tbody>
</table>
</div>
Any ideas how I can get both working while retaining a table layout? I know how to do it with other methods like grid and flexbox, that's not what I'm asking about.
You can consisder width:0;min-width:100%; trick on the pre. The idea is that the width:0 will disable the contribution of pre on defining the width of the container then min-width:100% will force it to fill all the space:
.main-content {
max-width: 800px;
border: 1px solid red;
}
th:first-of-type {
white-space:nowrap;
}
pre {
overflow: auto;
width:0;
min-width:100%;
}
<div class="main-content">
<table border="0" class="config">
<thead>
<tr>
<th>Property</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="config-name">name</td>
<td class="config-description">
<p>Foo bar talking about some random things related to our code here in the paragraph:</p>
<pre>// some really long code section here that should have its own scroll bar (and not wrap) some really long code section here that should have its own scroll bar (and not wrap)</pre>
</td>
</tr>
</tbody>
</table>
</div>
Related question: How to match width of text to width of dynamically sized image?
The only way I can see to do this is to wrap your <pre> in a <div> with overflow: auto and set the cell to display: grid
.main-content {
max-width: 800px;
border: 1px solid red;
}
table {
table-layout: auto;
width: 100%;
}
.config-name {
white-space: nowrap;
}
.config-description {
display: grid;
}
.config-description div {
overflow: auto;
}
<div class="main-content">
<table border="0" class="config">
<thead>
<tr>
<th>Property</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="config-name">name</td>
<td class="config-description">
<p>Foo bar talking about some random things related to our code here in the paragraph:</p>
<div>
<pre>// some really long code section here that should have its own scroll bar (and not wrap) some really long code section here that should have its own scroll bar (and not wrap)</pre>
</div>
</td>
</tr>
<tr>
<td class="config-name">longer property name</td>
<td class="config-description">
<p>Just another description, this one without a <pre></p>
</td>
</tr>
</tbody>
</table>
</div>
I have a table with two columns. One has some property names and the other has descriptions, including pre tags. I need the pre tags to not wrap and instead scroll to see overflow. I also need the first column to be sized based on the largest property name. I can't get the two to play nicely with each other.
For example I can get the first column to size based on the content but the pre won't scroll:
.main-content {
max-width: 800px;
border: 1px solid red;
}
pre {
overflow: auto;
}
<div class="main-content">
<table border="0" class="config">
<thead>
<tr>
<th>Property</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="config-name">name</td>
<td class="config-description">
<p>Foo bar talking about some random things related to our code here in the paragraph:</p>
<pre>// some really long code section here that should have its own scroll bar (and not wrap) some really long code section here that should have its own scroll bar (and not wrap)</pre>
</td>
</tr>
</tbody>
</table>
</div>
I can also get the pre to scroll but then I can't get the first column to resize:
.main-content {
max-width: 800px;
border: 1px solid red;
}
table {
table-layout: fixed;
width: 100%;
}
th:first-of-type {
width: 15%; /* Faking it here - the size of the first td/th should be based on the largest */
}
pre {
overflow: auto;
}
<div class="main-content">
<table border="0" class="config">
<thead>
<tr>
<th>Property</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="config-name">name</td>
<td class="config-description">
<p>Foo bar talking about some random things related to our code here in the paragraph:</p>
<pre>// some really long code section here that should have its own scroll bar (and not wrap) some really long code section here that should have its own scroll bar (and not wrap)</pre>
</td>
</tr>
</tbody>
</table>
</div>
Any ideas how I can get both working while retaining a table layout? I know how to do it with other methods like grid and flexbox, that's not what I'm asking about.
You can consisder width:0;min-width:100%; trick on the pre. The idea is that the width:0 will disable the contribution of pre on defining the width of the container then min-width:100% will force it to fill all the space:
.main-content {
max-width: 800px;
border: 1px solid red;
}
th:first-of-type {
white-space:nowrap;
}
pre {
overflow: auto;
width:0;
min-width:100%;
}
<div class="main-content">
<table border="0" class="config">
<thead>
<tr>
<th>Property</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="config-name">name</td>
<td class="config-description">
<p>Foo bar talking about some random things related to our code here in the paragraph:</p>
<pre>// some really long code section here that should have its own scroll bar (and not wrap) some really long code section here that should have its own scroll bar (and not wrap)</pre>
</td>
</tr>
</tbody>
</table>
</div>
Related question: How to match width of text to width of dynamically sized image?
The only way I can see to do this is to wrap your <pre> in a <div> with overflow: auto and set the cell to display: grid
.main-content {
max-width: 800px;
border: 1px solid red;
}
table {
table-layout: auto;
width: 100%;
}
.config-name {
white-space: nowrap;
}
.config-description {
display: grid;
}
.config-description div {
overflow: auto;
}
<div class="main-content">
<table border="0" class="config">
<thead>
<tr>
<th>Property</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="config-name">name</td>
<td class="config-description">
<p>Foo bar talking about some random things related to our code here in the paragraph:</p>
<div>
<pre>// some really long code section here that should have its own scroll bar (and not wrap) some really long code section here that should have its own scroll bar (and not wrap)</pre>
</div>
</td>
</tr>
<tr>
<td class="config-name">longer property name</td>
<td class="config-description">
<p>Just another description, this one without a <pre></p>
</td>
</tr>
</tbody>
</table>
</div>
For example, if I use
<table class='table'></table>
and
<div> <table class='table'></table> </div>
both table tags will get the bootstrap .table stylings. But when I work with css, if I want to apply stylings to both, I have to use 2 different styling calls
.table{};
div .table{};
How does bootstrap do it?
Basically, what you are saying ... if I want to apply stylings to both, I have to use 2 different styling calls is not true.
See this example:
https://jsfiddle.net/pablodarde/ecxxcx3j/
If you set a class "table", all tables in your code will follow the class rules. However, if you specialize some tables, like, div .table, those tables will follow the div .table rules.
Try an experience, remove the div .table from css code.
The css engine start looking for the most specialized elements before, and keep looking until reach the most general rules.
HTML
<table class='table'>
<tr>
<td>T1 C1</td>
<td>T1 C2</td>
</tr>
</table>
<div>
<table class='table'>
<tr>
<td>T2 C1</td>
<td>T2 C2</td>
</tr>
</table>
</div>
<div>
<div>
<div>
<table class='table'>
<tr>
<td>T1 C1</td>
<td>T1 C2</td>
</tr>
</table>
</div>
</div>
</div>
CSS
.table {
border: 1px solid red;
margin-bottom: 10px;
}
div .table {
border: 1px solid green;
}
I've been trying to make a colored table with even rows with class item a different color than the odd ones.
Please, see fiddle: http://jsfiddle.net/x7XT5/
HTML:
<table>
<tr class="item">
<td>1</td>
</tr>
<tr>
<td>info</td>
</tr>
<tr class="item">
<td>2</td>
</tr>
<tr>
<td>info</td>
</tr>
<tr class="item">
<td>3</td>
</tr>
<tr>
<td>info</td>
</tr>
<tr class="item">
<td>4</td>
</tr>
<tr>
<td>info</td>
</tr>
</table>
CSS:
table tr.item:nth-child(2n)
{
background-color: yellow;
}
table tr.item:nth-child(2n+1)
{
background-color: red;
}
How to make it work in css?
UPD1
<tr> without class item must be on white background.
<tr class="item">'backgrounds must be red/yellow on even/odd positions.
table tr
{
background-color: yellow;
}
table tr.item:nth-child(2n+1)
{
background-color: red;
}
update: Here you go:
table tr {
background-color: white;
}
table tr.item:nth-child(n)
{
background-color: red;
}
table tr.item:nth-child(4n+1)
{
background-color: yellow;
}
Try this. No need to set the nth child.
http://jsfiddle.net/x7XT5/2/
You could also use odd & eeven keywords.
Hey remove the class and check in your tr and css file
and create easily
Live demo http://jsfiddle.net/x7XT5/1/
and
second method is Live Demo http://jsfiddle.net/x7XT5/3/
Updated Live demo http://jsfiddle.net/x7XT5/5/
First, I think, you should use :nth-of-type instead of :nth-child, but
unfortunately, :nth-of-type doesn't work with classes, so I dont know any pure CSS solution.
You can always use:
table tr.item:nth-of-type(4n+3)
{
background-color: yellow;
}
table tr.item:nth-of-type(4n+1)
{
background-color: red;
}
Works for this example.
Just to frame you. Look at the following code.
Basically I have a table inside a div. When the table gets too big the overflow hidden triggers.
PROBLEM: in IE6 the "some text" gets hidden as expected but the floated span not.
Is there a way around of fix it?
#wrap{
overflow:hidden;
height:20px
}
span{
float:left;
height:10px;
width:10px;
background:url(image.jpg) no-repeat 0 0;
}
<div id="wrap">
<table>
<tr>
<td><span></span> some text</td>
</tr>
<tr>
<td><span></span> some text</td>
</tr>
<tr>
<td><span></span> some text</td>
</tr>
</table>
</div>
Try giving height:1%; for ie6 css. as below.
wrap{
overflow:hidden;
height:%;
}