HTML
<table>
<tr>
<td>td1td1td1td1 td1td1td1td1td1td1td1td1td1td1td1</td>
<td>td2</td>
</tr>
</table>
CSS
td{
border:black thin solid;
max-width:50%;
}
table{
width:100%
}
I want to set the max width of the td to 50%, but it isn’t working for me ...
Hope someone could help on this.
Please view the output on: http://jsfiddle.net/38bf2/
P.S.
I already try to view the result via Chrome and Firefox.
Add table-layout:fixed;. Change your CSS on the table to:
table{
width:100%;
table-layout:fixed;
}
jsFiddle example
Use the following code
td{
border:black thin solid;
max-width:50%;
width:50%;
}
table{
width:100%;
}
Instead of max-width try width:50%;
Related
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 have a table, I want to give css "overflow:scroll" to each tr, but its not working. Here is my code.
HTML
<table>
<tr>
<td>hai</td>
<td>hellow</td>
<td>shcjbjs</td>
<td>dvkd</td>
</tr>
<tr>
<td>hai</td>
<td>hellow</td>
<td>shcjbjs</td>
<td>dvkd</td>
</tr>
<tr>
<td>hai</td>
<td>hellow</td>
<td>shcjbjs</td>
<td>dvkd</td>
</tr>
<tr>
<td>hai</td>
<td>hellow</td>
<td>shcjbjs</td>
<td>dvkd</td>
</tr>
</table>
CSS
table{
border:1px solid red;
}
td{
border:1px solid blue;
height:100px;
}
tr{
height:50px;
overflow-y:scroll;
}
I have made a fiddle with the example please give me a solution.
Check this working demo FIDDLE
table{
border:1px solid red;
}
td{
border:1px solid blue;
height:100px;
}
tr{
height:50px;
overflow:scroll;
display:block;
}
you can try overflow:scroll; in td
You may try CSS properties:
overflow: scroll;
or
overflow: auto;
Similarly, you may also use:
`overflow-y` if you want only a vertical scroll or
`overflow-x` if you want only a horizontal scroll
Do set a height for the row and check browser compatibility for all these CSS properties.
Use a set of div instead of a table for better results
table{
border:1px solid red;
}
td{
border:1px solid blue;
height:100px;
}
tr{
height:50px;
overflow:scroll;
display:block;
}
this might help, but i am not sure if this is any way of treating the table...
<tr>
<td>your long content here</td>
</tr>
css:
tr{
height:50px;
display:block;
overflow-y:auto;overflow-x: hidden;
}
FIDDLE http://jsfiddle.net/kemalemin/E2r2W/7/
I've got a table that contains data. Tabular data. And it looks like this.
See this fiddle.
Now what I'd like is, when it's displayed on a narrower screen, for the table to look like this, so that you don't get a horizontal scroll bar and it keeps the same visual structure:
(or if you want, like this fiddle.)
Now my question is, how do you do that? I'd prefer a CSS only way, but so far, I haven't managed to do that in only CSS. (The second fiddle contains rowspan attributes, which don't have CSS equivalents.)
The HTML is generated server side, so I could generate one of the two layouts depending on the window width, but then it wouldn't respond to a window resize.
I'm not against a little Javascript, but in this case, to translate the first table into the second on a window resize, it would need to be taken apart and rebuilt, cell by cell, and I think that's overkill. Still looking for a media query that can do all the work.
Experimenting a bit, I came this close, but that doesn't work in IE8 and IE9.
So, does anybody have any ideas how to tackle this? The ideal solution would work on table cells of varying height (2 lines of text or more) and any number of columns.
ya as your html is same you can change the styles for the css properties according to the media query a better solution would be-
fiddle
#media only screen and (min-width: 769px) {
#content {
border:1px solid;
border-collapse:collapse;
}
#content td, #content th {
border:1px solid;
text-align:left;
padding:.07em .2em;
white-space:nowrap;
font-weight:400;
}
}
#media only screen and (max-width: 768px) {
#content {
border:1px solid;
border-collapse:collapse;
}
#content tr {
height:4em; border-bottom:1px solid;
}
#content th {
border:1px solid;
text-align:left;
padding:.07em .2em;
white-space:nowrap;
font-weight:400;
height:4em;
}
#content td {
padding:.07em .2em;
white-space:nowrap;
height:1.4em;
display:inline;
}
#content td:not(:last-child)::after {
display:block; content:'';
height:0;
border-bottom:1px solid;
}
}
one possible solution is to use media queries an hide the respective blocks
or change styles accordingly
here is a fiddle
changed smaller table id to content2
#media only screen and (max-width: 768px) {
#content{
display:none !important;
}
}
#media only screen and (min-width: 769px) {
#content2{
display:none !important;
}
}
I know this isn't exactly what you want but I created a jsfiddle some time ago as a reference which might help: jsfiddle.net/webbymatt/MVsVj/1
essentially the markup remains the same, there's no JS and the content just reflows as expected. you just need to add the data-type attribute to the table cell.
Check this CodePen.
I found this solution long ago in css-tricks.com.
The table gets a little messy:
<table>
<tr>
<td>
Description 1
</td>
<td>
<table class="responsive" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="text-center">Data 1A</td>
<td class="text-center">Data 1B</td>
<td class="text-center">Data 1C</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
Description 2
</td>
<td>
<table class="responsive" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>Data 2A</td>
<td>Data 2B</td>
<td>Data 2C</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
And this is the css:
/* Small display targeting */
#media only screen and (max-width: 767px) {
/* Force table to not be like tables anymore */
.responsive, .responsive thead, .responsive tbody, .responsive th, .responsive td, .responsive tr {
display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
.responsive thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
.responsive td {
/* Behave like a "row" */
position: relative;
}
.responsive td:before {
/* Now like a table header */
position: absolute;
}
}
You could inline block the elements. I haven't had much time to play, but something like the following:
#content {
border:1px solid;
border-collapse:collapse;
}
#content td, #content th {
border:1px solid;
text-align:left;
padding:.07em .2em;
white-space:nowrap;
font-weight:400;
}
#content td {
display: inline-block;
width: 100px;
}
It's not the prettiest creation, though!
http://jsfiddle.net/8H3bN/
Is there any way in CSS the change the background-color of a Row in a table made of 3 columns, when I hover over a cell in this row?
table tr:hover
{
background-color:blue;
}
Doesn't seem to work.
UPDATE
I'm using Mozilla Firefox, it only works when I hover over a <th> not a <td>
Use this syntax:
tr.hover > td:hover
{
background-color: blue;
}
<tr class="hover">
<td>;lajsdfl;jasdl;jasd;f</td>
<td>;lajsdfl;jasdl;jasd;f</td>
</tr>
The fiddle: http://jsfiddle.net/DQ9Vz/
tr:hover{
background-color:red;
}
This works fine for me:
http://jsfiddle.net/EJ63m/
<html>
<head>
<style>
table tr:hover
{
background-color:blue;
}
</style>
</head>
<body>
<table>
<tr><td>Foo</td><td>Bar</td><td>FooBar</td></tr>
<tr><td>Bar</td><td>Foo</td><td>FooBar</td></tr>
</table>
</body>
</html>
What browser are you using?
This is what solved it.
table tr:hover > td
{
background-color:aqua;
}
Sorry for my bad English, I hope you're going to understand what I want to say...
I'm trying to implement an HTML table which support scrolling of table bodies independently of the table head.
I found the following question which helped me a lot :
How to scroll table's "tbody" independent of "thead"?
I tested the following code, it works on Chrome (22), Firefox (16) and Opera (12) without issue :
HTML :
<table>
<thead>
<tr>
<th>Title1</th>
<th>Title2</th>
<!-- ... -->
</tr>
</thead>
<tbody>
<tr>
<td>...</td>
<td>...</td>
<!-- ... -->
</tr>
<!-- ... -->
</tbody>
</table>
CSS :
thead, tbody {
display: block;
}
tbody {
height:500px;
overflow-y:auto;
overflow-x:hidden;
}
thead {
line-height: 20px;
}
So it works on the main browsers except IE 9, on IE, I have some issues :
The tbody's height is not defined (so I don't have any scrollbar)
Each has an height of 500px (the tbody's height on other browsers)
The two following examples have exactly the same issues : http://jsfiddle.net/nyCKE/2/ , http://www.imaputz.com/cssStuff/bigFourVersion.html
I saw the following question (and answer) but it doesn't help me : IE9 + css : problem with fixed header table
So I'm sure that the bug comes from IE but I don't have any idea how to fix it without change my HTML structure.
Have someone any idea ?
I have slightly tried to fix it. Hope it gives some idea
HTML
<div class="wrap">
<div class="inner">
<table>
<thead><tr>
<th><p>Problem</p></th>
<th><p>Solution</p></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
CSS
p {margin:0 0 1em}
table p {margin :0}
.wrap {
margin:50px 0 0 2%;
float:left;
position:relative;
height:200px;
overflow:hidden;
padding:25px 0 0;
border:1px solid #000;
width:150px
}
.inner {
padding:0 ;
height:200px;
overflow:auto;
}
table { margin:0 0 0 -1px; border-collapse:collapse; width:130px}
td {
padding:5px;
border:1px solid #000;
text-align:center;
}
thead th {
font-weight:bold;
text-align:center;
border:1px solid #000;
padding:0 ;
color:#000;
}
thead th {border:none;}
thead tr p { position:absolute; top:0; }
.last { padding-right:15px!important; }
Demo http://jsfiddle.net/nyCKE/272/
Here is a shorter answer that allows you to scroll the table with a fixed header in ie9.
Add a conditional div around the table
<!--[if lte IE 9]>
<div class="old_ie_wrapper">
<!--<![endif]-->
<table>
...
<!--[if lte IE 9]>
</div>
<!--<![endif]-->
Add the following styles for ie9
.old_ie_wrapper {
height: 500px;
overflow: auto;
}
.old_ie_wrapper tbody {
height: auto;
}
.old_ie_wrapper thead tr {
position: absolute;
}
.old_ie_wrapper tbody tr:first-child {
height: 67px;
vertical-align: bottom;
}
You will have to adjust the heights and probably other properties based on your table.