This is the part of my code:
<div class="main_100%">
<h1 class="main-header">Header</h1>
<div class="sub_50%" style="padding:15px"><strong>Sample:</strong> some text.</div>
<table style="border:none;padding:15px">
<tbody>
<tr>
<td style="vertical-align:top;width:60%;padding-right:25px;padding-bottom:15px">something</td>
<td style="vertical-align:top;width:40%;padding-bottom:15px">something</td>
</tr>
<tr>
<td style="vertical-align:top;width:60%;padding-right:25px;padding-bottom:15px">something</td>
<td style="vertical-align:top;width:40%;padding-bottom:15px">something</td>
</tr>
<tr>
<td style="vertical-align:top;width:60%;padding-right:25px">something</td>
<td style="vertical-align:top;width:40%">something</td>
</tr>
</tbody>
</table>
</div>
Google PageSpeed and GTMetrix said that there is a large CLS. I realized that if I set the table to a fixed size (for example 500px), the problem disappears. But if I set it to a fixed width, it won't be responsive in all resolutions.
If I add style="overflow:auto" to the div, then the CLS decreases slightly, but it still remains. I don't know what to do, please, help me.
Thank you very much!
Related
I want to add table to my website that will not change height or width when I added a picture. The picture needed to automatic resize to td.
How can I do it?
<table style="width:100%" border="1">
<tr>
<td style="width:34%"><!--Right-->
<table border="1" style="width:100%">
<tr>
<!--Symbol--><td>
<i class="fa fa-arrow-circle-right" style="font-size:72px"></i>
</td>
<!--Name--><td style="text-align:center"><b><font style="font-size:42px">dsfdsfs</font></b><br /><font style="font-size:32px">sdfdsdsf</font></td>
<!--logo--><td>
</td>
</tr>
</table>
</td>
<td style="width:32%" rowspan="8"><!--center-->
</td>
<td style="width:34%"><!--Left-->
<table border="1" style="width:100%">
<tr>
<!--logo--><td></td>
<!--Name--><td style="text-align:center"><img src="images/company/integrity.png" /></td>
<!--Symbol--><td style="text-align:left">
<i class="fa fa-arrow-circle-left" style="font-size:72px; left:0"></i>
</td>
</tr>
</table>
</td>
</tr>
</table>
Use max-width and max-height and set it to size of td or 100%
And I would like to suggest you NOT to write inline styles...
you using the % value to the table. So table are using current resolution i mean of the window in which you opened the page. In order to say for the table to stay in same height you need to use pixels for example:
570px; not 100% or 50% of the viewing screen.
so for the fist line i believe you can simple use the pixel value.
for example:
<table style="width:1200px" border="1">
for the image don't forget to add 100% values for example:
<td style="text-align:center" width="100%" height="100%"><img src="images/company/integrity.png" /></td>
I have an alignment issue where the alignment of the background color of the first cell is little more compared to the other cell. I don't know why is it happening.
As in the screen shot the cell which has week has the alignment little higher compared to other cell. Why is this happening ?
How am I supposed to make it aligned properly? Please help me.
I updated your fiddle and added some background colors to it, as you can see in below html fragment.
<td style="text-align: left; padding-left: 10px;background-color: lime" >
<div class="ng-binding" ng-class="{'TODAY': 'todayDate'}[event.dayType]">Fri 1.</div>
</td>
<td colspan="7" style="background-color: red">
<table id="test" style="table-layout: fixed;background-color: aqua">
<tbody>
I've been trying to reset some of those element's CSS value, though they don't kick in, which makes me believe there is other settings somewhere in your CSS files using the same properties, likely with !important.
So, if you check the fiddle you'll see that the recolored td's is different in height and that should narrow down your problem.
Now it would be easier for your to check those settings, alter them some, to see how you can give them the same height.
One observation I made is, if you add a text like this <td colspan="7" style="background-color: red"> Test text <table id="test", you'll see that the red background appear and that background color doesn't have the alignment issue.
Here is one more fiddle update showing that: https://jsfiddle.net/enypgyt3/4/
<p>You should use proper table format like</p>
<p>Table should be proper nested </p>
<p>Table td and tr is not nested properly</p>
<p>Try to comment every table row(tr)</p>
<table border="1" cellspacing="0" cellpadding="5"> <!--table start------->
<tr> <!--tr start-->
<td>
<table>
<tr>
<td>one</td>
<td>Two</td>
<td>Three</td>
<td>four</td>
</tr>
</table> <!--/table inside td open and it should properly closed-->
</td>
<td>Five</td>
<td>Six</td>
<td>Seven</td>
<td>Eight</td>
</tr> <!--/tr end-->
<tr> <!--second row statr-->
<td colspan="4"> <!-- User proper Colspan for every td -->
One-four five six seven
</td>
<td>
Eight
</td>
</tr> <!--second row stard-->
<tr> <!--Third row start-->
<td colspan="5">
One-four five six seven eight
</td>
</tr>
<tr>
<td>One-four</td>
<td>Five</td>
<td>Six</td>
<td>Seven</td>
<td>Eight</td>
</tr>
</table>
<p>If possible try comment maximum tr and td </p>
<p>Follow code indentation</p>
I am facing a strange bug that is happening on both IE and Chrome. I have and application that loads a matrix of info but for some reason in a specific case things dont show correctly. By configuration i am able to change the way the info is being displayed and for that i use the rowspan and colspan.
I am not using any Javascript, just html. This image show what is happening:
Sorry still cant post image but here is the fiddle
http://jsfiddle.net/gondias/22o07mbt/
<table cellspacing="6" cellpadding="0" style="width:558px; background-color:red">
<tr>
<td colspan="3" rowspan="2">
<div class="tile_3x2"></div>
</td>
<td colspan="1" rowspan="2">
<div class="tile_1x2"></div>
</td>
</tr>
<tr></tr>
<tr>
<td colspan="2" rowspan="2">
<div class="tile_2x2"></div>
</td>
<td colspan="2" rowspan="2">
<div class="tile_2x2"></div>
</td>
</tr>
<tr></tr>
<tr>
<td colspan="4" rowspan="1">
<div class="tile_4x1"></div>
</td>
</tr>
<tr>
<td colspan="4" rowspan="1">
<div class="tile_4x1"></div>
</td>
</tr>
</table>
For some reason the 1st cell in the second row gets extended pushing the following one.
Let me know of any questions you may have.
I think the usage of the rowspan/colspan is correct. Does anyone know what is happening here.
Thanks for the help, i'm really struggling here.
Do you really need to use tables here? Is it used for an email newsletter?
You can use divs with display: inline-block; to get the desired result without a table.
If you really need to take this way (not recommended), this is your solution:
http://jsfiddle.net/rcdmk/22o07mbt/1/
td {
width: 132px;
}
If you place a border on the TD tags you will see what's happening there. The cells (columns) doesn't have specific widths so the browser have to guess based on the content and this is not a consistent behavior between browsers. You will have to just give a width to the cells.
Bit of old school one i think but wondered if anyone had a solution for it by now:
Is there a way of getting equal columns in a table without knowing the number of columns just using html/CSS?
After the cleanest method possible really.
This is my test table at the moment:
<table class="panel-form panel-form_horizontal" style="width:100%;">
<tbody>
<tr>
<td colspan="3" class="header">
<h3>fieldset 1</h3>
<menu>
<button id="">edit</button>
</menu>
</td>
</tr>
<tr>
<td><label>name</label></td>
<td><label>name</label></td>
<td><label>name</label></td>
</tr>
<tr>
<td>supplier_1</td>
<td>www.bbc.co.uk</td>
<td>0</td>
</tr>
<tr>
<td colspan="3" class="header">
<h3>fieldset 2</h3>
<menu>
<button id="">edit</button>
</menu>
</td>
</tr>
<tr>
<td><label>name</label></td>
<td><label>name</label></td>
</tr>
<tr>
<td>0</td>
<td>0</td>
</tr>
</tbody>
</table>
There is no perfect solution to your question if you don't know the number of columns.
You can try:
table {
table-layout:fixed;
}
This will force the table to use fixed, equal cells. The problem is if your content is too large for the cell size it'll cause issues with content overlap, etc.
Here's a basic sample using your markup: http://jsfiddle.net/9HC8b/. Notice when the screen width is wide enough everything looks great. If you start dragging (shrinking) the window you'll see the content blows up.
I have this problem on my website's layout, and it's basically preventing me from continue it, it's destroying everything.
Here goes the HTML code:
<table cellpadding="0" cellspacing="0" width="446" height="362">
<!-- MSTableType="layout" -->
<tr>
<td valign="top" colspan="2" height="110">
<p align="center">Banner</td>
</tr>
<tr>
<td valign="top" height="95">I want this cell to have a fixed height</td>
<td valign="top" rowspan="3" width="305">
<p align="center">Text goes here - if the text is too long, I want the
stretching cell to vary in height, not the other 2.</td>
</tr>
<tr>
<td valign="top" height="68">I want this cell to have a fixed height</td>
</tr>
<tr>
<td height="89" width="141" valign="top">Stretching/Flexible cell - I
want this one to vary in height if the text on the right cell is too
long</td>
</tr>
</table>
As you can see, if I write a text that is larger than the "Text Cell" height, all the cells in the right column stretch, and I only want the last one to do so. Can you help me?
If you try to make a website with tables, then welcome to 21sst century. Table layout is very outdated. Try a site like http://www.pmob.co.uk/temp/3colfixedtest_4.htm. There you find a web standard layout.
Make the height of the bottom-left cell "*" like this:
<table cellpadding="0" cellspacing="0" width="446" height="362">
<!-- MSTableType="layout" -->
<tr>
<td valign="top" colspan="2" height="110">
<p align="center">Banner</td>
</tr>
<tr>
<td valign="top" height="95">I want this cell to have a fixed height</td>
<td valign="top" rowspan="3" width="305">
<p align="center">Text goes here - if the text is too long, I want the
stretching cell to vary in height, not the other 2.</td>
</tr>
<tr>
<td valign="top" height="68">I want this cell to have a fixed height</td>
</tr>
<tr>
<td height="*" width="141" valign="top">Stretching/Flexible cell - I
want this one to vary in height if the text on the right cell is too
long</td>
</tr>
</table>
This won't let you define the minimum height of the cell, but it works. Best of course would be to use css.
Actually, as I think about this, you can set the height of your right column to "257" (the sum of your left heights, and that will mean that your * will default to 89 if the right column does not stretch.
I am sure this is not cross-browser compatible however... Yup, just dusted off IE6, and it doesn't behave as one would expect. Firefox works great, though.
This probably means that css would be your best bet.
I would at least try to learn some CSS and use it to style and size your tables, instead of using HTML. There are many good tutorials out there, but for example:
table {
width: 600px;
}
table td {
padding: 5px;
}
will make your table 600px wide and give every <td> 5px of padding. Assign any cells or rows ids (unique) and classes (apply to a group) for more precise control.
As noted above, although it is not really an answer to your question, the best way to do what you want to do is to learn how to create CSS layouts using <DIV> tags. This will give you much more control of your page layout, and although requires some learning up front, will save you tremendous amounts of headaches in the future using tables.
Actually, looking at your example again. a based layout here would be very simple.
<div id='container'>
<div class='banner'>Banner</div>
<div class='fixed'>Fixed Height</div>
<div class='dynamic'>Expanding div to fit text inside</div>
<div class='fixed'>Fixed Height</div>
<div class='dynamic'>Expanding div to fit text inside</div>
</div>
This will give you the same layout as your table with some CSS styling.
EDIT: One last word on the matter. For me personally, if I know that an area is going to be a grid type area with no special formatting needs for different areas a <table> is fine, otherwise I will always use a CSS based layout.
Thanks for the responses guys. I tried for the last few hours to built this with divs, but i'm going nowhere. I have lots of rowspans ans colspans, and I can't put them in CSS.
Actually the design is WAY more complicated that the simple table I posted here:
<table cellpadding="0" cellspacing="0" width="750" height="871">
<!-- MSTableType="layout" -->
<tr>
<td valign="top">
<p style="margin-top: 0; margin-bottom: 0">Banner</td>
<td valign="top" rowspan="3">
<p style="margin-top: 0; margin-bottom: 0">Banner</td>
<td valign="top" rowspan="3" colspan="2">
<p style="margin-top: 0; margin-bottom: 0">Banner</td>
<td height="154"></td>
</tr>
<tr>
<td valign="top">Banner</td>
<td height="24"></td>
</tr>
<tr>
<td valign="top" rowspan="3">Fixed Menu Cell</td>
<td height="122"></td>
</tr>
<tr>
<td valign="top" colspan="3">
Banner</td>
<td height="29"></td>
</tr>
<tr>
<td valign="top" rowspan="6" colspan="2"><p> </p>
<p>CONTAINER AREA, Text goes Here</p>
</td>
<td valign="top" rowspan="6">
</td>
<td height="102"></td>
</tr>
<tr>
<td valign="top">
Fixed Menu Cell</td>
<td height="37"></td>
</tr>
<tr>
<td valign="top">
Fixed Menu Cell</td>
<td height="44"></td>
</tr>
<tr>
<td valign="top">
Fixed Menu Cell</td>
<td height="178"></td>
</tr>
<tr>
<td valign="top">
Fixed Menu Cell</td>
<td height="109"></td>
</tr>
<tr>
<td bgcolor="#FFFFFF">Flexible Cell - can vary depending on the
Container Area</td>
<td height="33"></td>
</tr>
<tr>
<td valign="top" colspan="4">
<p align="center">Bottom</td>
<td height="38"></td>
</tr>
<tr>
<td width="252"></td>
<td width="410"></td>
<td width="56"></td>
<td width="30"></td>
<td height="1" width="2"></td>
</tr>
</table>
I'm trying to convert this mess to DIV, but I don't think I'm going to make it ^^''
It seems such a simple problem, but I can't see a simple soluction...