For example I have this CSS rule:
.dataList table {
width: 100%;
}
.dataList table.onlyThisTables {
width: 400px;
}
<div class="dataList">
<table>
<tr>
<td>
Content of this table
<table class="onlyThisTables">
<tr>
<td>Content of this table
<td>
</tr>
</table>
</td>
</tr>
</table>
</div>
But always get width:100%; in all tables, I want to affect with 400px width for .onlyThisTables class, How can I do it?
This depends on your html structure. Could you put an example of the html code?
Probably the answer is:
.dataList table {
width:100%;
}
.onlyThisTables {
width:400px;
}
UPDATED:
To solve your updated question you can use !important suffix:
.dataList table {
width: 100%;
}
.dataList .onlyThisTables {
width: 400px !important;
}
Here is an example: https://jsfiddle.net/Lksv4dnd/
You need to specify a max-width in your styles:
.dataList table {
width: 100%;
}
.dataList table.onlyThisTables {
width: 400px;
max-width: 400px;
}
Related
I have a simple HTML code where I draw a table and assign different classes to the Alternative rows :
<div id="content">
....
<table>
<tr class="a1"> ... </tr>
<tr class="a2"> ... </tr>
</table>
....
</div>
In my CSS I have the following definitions
#content {
float: right;
width: 98%;
padding-top: 15px;
}
#content tr.a1 {
background-color: #F1F1F1;
}
#content tr.a2 {
background-color: #F2FFFF;
}
When my HTML page loads background color remains white.
However if I update my CSS by removing "#content" :
tr.a1 {
background-color: #F1F1F1;
}
tr.a2 {
background-color: #F2FFFF;
}
everything works correctly. It seems like link to "content" property is not working. How can I fix it?
thank you in advance.
You need to wrap additionally in <td>...</td> tags.
Here is the correct structure for a regular table:
<table>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
<tr>
<td>Jane</td>
<td>Doe</td>
</tr>
</table>
You can read more here.
#content {
float: right;
width: 98%;
padding-top: 15px;
}
#content tr.a1 {
color: #F1F1F1;
}
#content tr.a2 {
color: #F2FFFF;
}
<div id="content">
<table>
<tr class="a1">
<td>123<td>
</tr>
<tr class="a2">
<td>123<td>
</tr>
</table>
</div>
If you write #content tr.a1 it means tr is right after #content
which is obviously not, you have table in between.
I STAND CORRECTED
I have been honestly coding for 10 years wrong...
.class1 .class2 .name1 .name2 Selects all elements with name2 that
is a descendant of an element with name1
You can write that like this to work:
#content * tr.a1
or
#content table tr.a1
Please learn how to use CSS Selectors
Examples:
#content {
float: right;
width: 98%;
padding-top: 15px;
}
#content table tr.a1 {
background-color: red;
}
#content * tr.a2 {
background-color: blue;
}
<div id="content">
<table>
<tr class="a1">
<td>tr 1</td>
</tr>
<tr class="a2">
<td>tr 2</td>
</tr>
</table>
</div>
I am trying to work with CSS and containers without success, I would like if someone helps:
I am trying to do as the specified with the following code, the table is okay is fulfilled the 100% of the 40% of body Container1 DIV, the problem is with the rows and the columns, they don't follow the specification.
<div id="CamadaSuperior" >
<table id="tabela">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
<div id="CamadaDoMeio" >
CamadaDoMeio
</div>
<div id="CamadaInferior" >
<table class="TabelaDaCamadaInferior" border="1">
<tr><td>Esquerda</td><td>Meio</td><td> Direita</td></tr>
</table>
</div>
<div id="CamadaRodape" >
</div>
</body>
My CSS is this:
html, body{
height: 100%;
margin:0;
padding:0;
}
div{
border:1px solid black;
padding:0;
}
#CamadaSuperior
{
height: 40%;
}
#CamadaDoMeio
{
height: 10%;
}
#CamadaInferior
{
height: 40%;
padding:0;
}
#CamadaRodape
{
height: 10%;
padding:0;
}
#tabela{
height:100%;
table-layout: fixed;
border-width:1px;
}
#tabela tr{
width:50%;
height:100%;
border-width:1px;
}
#tabela tr td{
width:100%;
height:16.7%;
}
.TabelaDaCamadaInferior
{
height: 100%;
width: 100%
}
.TabelaDaCamadaInferior tr td
{
width:33%;
}
But this is what is happening with table row:
TD tag does not work as well:
Well the short answer is to make use of a CSS framework like bootstrap, it can be used in an eclipse environment and just attach the classes you need in order to get it to position correctly. Check the link here https://www.texniq.de/en/web-engineering-i/create-first-bootstrap-project
The long answer is that you need to style each td & tr with a class that has the width and height that you want. You'll also need to adjust the font-size accordingly so that the text in each cell will fit properly. Right now the table has some css applied but the tags within it are using their default values.
I want to design table in html that would have different heights of td using only one table. Is it possible? If possible how can I get it done?
<table>
<tbody>
<td>height:30px</td>
<td>height:90px</td>
<td>height:60px</td>
<td>height:80px</td>
</tbody>
</table>
Something like this table :
<style>
tr {
height: auto;
}
td {
overflow: hidden;
display: inline-block;
white-space: nowrap;
vertical-align: top;
background-color: #3399ff;
height: 100%;
width: 75px;
border: 1px solid black;
}
td:nth-child(odd) {
background-color: #1177dd;
}
#b {
height: 200px;
}
#j {
height: 90px;
}
#k {
height: 180px;
}
</style>
<table>
<tbody>
<tr>
<td id="b">b</td>
<td id="j">j</td>
<td id="k">k</td>
</tr>
</tbody>
</table>
I suggest you take a look at rowspan. In my opinion, this is the best solution to your problem. It would take a slightly different HTML setup but should do the trick.
http://www.w3schools.com/tags/att_td_rowspan.asp
Use div inside the table td tag Or Convert all code to div instead of table
<table>
<tbody>
<td><div "height:30"></div> <div "height:40"></div> <div "height:60"> </div></td>
</tbody>
</table>
Somthing like this should do the Trick:
<td style="height: 30px"></td>
For styling anything in html you have to use the style Tag and then what you want to style,
or link to a seperate css file
How can I display my image and the table on the same level? This is really depressing me because I can't get "inline-block" to work. :(
<p id="play">
hey
</p>
<div id="menu">
<table>
<tr>
<td>Models</td>
</tr>
<tr>
<td>Cars</td>
</tr>
<tr>
<td>Modern Houses</td>
</tr>
<tr>
<td>Vacation Spots</td>
</tr>
<tr>
<td>Sports and Outdoors</td>
</tr>
<tr>
<td>Books</td>
</tr>
<tr>
<td>Abandoned Houses</td>
</tr>
<tr>
<td>Summer Wear</td>
</tr>
<tr>
<td>Makeups</td>
</tr>
<tr>
<td id="site">Site Info</td>
</tr>
</table>
</div>
<img src="C:\Users\Elexie\Documents\Downloads\faki2.jpg"/>
body {
background: #181818;
margin: 0;
padding: 0;
}
/* set body display to inline-table*/
#play {
background: black;
color: white;
margin: 0;
padding: 0;
height: 35px;
}
table,td {
color: white;
border: 1px solid white;
border-collapse: collapse;
width: 160px;
padding: 10px;
font-family: ;
}
table {
}
#site {
height: 350px;
}
img {
float: right;
}
I changed the picture, but it's of similar size
http://jsfiddle.net/w6d5g/
In your css code:
table{
float:left;
}
Should do the trick.
Read more: http://www.w3schools.com/css/css_float.asp
Check this fiddle: http://jsfiddle.net/Mohamed_nabil/F8MKp/
/*******Added style******/
img
{
/*165px is your Menu width with borders*/
max-width: calc(100% - 165px);
/*For cross browser*/
-webkit-max-width: calc(100% - 165px);
-moz-max-width: calc(100% - 165px);
-o-max-width: calc(100% - 165px);
-ms-max-width: calc(100% - 165px);
display: inline-block;
vertical-align: top;/* Can be middle, bottom */
}
#menu{
display: inline-block;
}
Firstly, wrap your image tag with a div. Name this div anything you want. Let's name it: "image-test".
<div class="image-test">
<img src="(URL for IMAGE)">
</div>
Next, let's say you want your table to take up 50% of the width and your image to take up the other 50%. We are also going to float these div elements so they are not in the flow of the document.
#menu{
float:left;
width:50%;
}
.image-test{
float:left;
width:50%;
}
You'll notice your image is larger than the containing div, so let's set a max width on all images to avoid future problems.
img {
max-width:100%;
}
EDIT 2: I'm talking about the layout of the table, not the colours.
I need to style my table so that it appears as such:
The idea is to have the first th td pair on top and the rest should be in line under it.
Is that feasible through CSS?
I don't have control over the HTML here so CSS is my only option.
Edit:
Here's the HTML
<div class="content">
<table>
<thead>
<tr>
<th class="thtitle" >
Title </th>
<th class="thvalue" >
Value </th>
<th class="thquantity" >
Quantity </th>
<th class="thsum" >
Sum </th>
</tr>
</thead>
<tbody>
<tr class="first">
<td class="tdtitle" >…</td>
<td class="tdvalue" >…</td>
<td class="tdquantity" >…</td>
<td class="tdsum" >…</td>
</tr>
<tr class="last">
<td class="tdtitle" >…</td>
<td class="tdvalue" >…</td>
<td class="tdquantity" >…</td>
<td class="tdsum" >…</td>
</tr>
</tbody>
</table>
</div>
Edit 2:
I've added a fiddle that does exactly what you want, but be warned that nth-child doesnt play nice in IE8. It also assumes that the HTML you gave us is ALWAYS that way [ie always has the same amount of th/td's].
http://jsfiddle.net/8awAj/
Edit:
Is the html you posted ALWAYS like that? Ie never any more or less headings etc?
This isn't 100% what you want, but its kind of close. To get exactly what you want you would have to do a LOT of manual absolute positioning using :nth-child which would be horrible.
http://jsfiddle.net/9JWpA/
table {
width: 100%;
padding-top: 40px;
position: relative;
}
th {
background: yellow;
}
td {
background: green;
}
th,
td {
top: 40px;
width: 16.666%;
position: absolute;
}
th:first-child,
td:first-child {
width: 100%;
top: 0;
left: 0;
}
td:first-child {
top: 20px;
}
th:nth-child(2) {
left: 0;
}
td:nth-child(2) {
left: 16.666%;
}
th:nth-child(3) {
left: 33.333%;
}
td:nth-child(3) {
left: 49.998%;
}
th:nth-child(4) {
left: 66.666%;
}
td:nth-child(4) {
left: 83.33%;
}
try this..
http://jsfiddle.net/9JWpA/
html:
<table cellspacing=0;>
<tr><th colspan="6">th</th></tr>
<tr><td colspan="6">td</td></tr>
<tr><th>th</th><td>td</td><th>th</th><td>td</td><th>th</th><td>td</td></tr>
</table>
css:
table
{
width:200px;
border:1px solid black;
text-align:left;
}
th
{
background:yellow;
}
td
{
background:green;
}