Table padding doesn't work in IE - html

i have a table that consists of two rows, the second row is a table, which i want it's elements to be centered to the main table, so my code is as follows:
<TABLE>
<TBODY>
<TR>
<TD>
<DIV id=gform:scan_area>
<OBJECT></OBJECT>
</DIV>
</TD>
</TR>
<TR>
<TD>
<TABLE style="PADDING-LEFT: 300px"> // works in firefox but doesn't work in ie9
<TBODY>
<TR>
<TD>
<INPUT>
</TD>
<TD>
<SPAN></SPAN>
</TD>
<TD>
<INPUT>
</TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
</TBODY>
</TABLE>
ISSUE: TABLE style="PADDING-LEFT: 300px" works fine in firefox but doesn't work in IE9 (Quirks mode), please advise how to fix this issue or if you have any other ideas.


I think your code is not written well enough, it was much better if you used "colspan" for solving this issue.
Any way, I tried to change your code in a way that centralize the second table in the first table:
<TABLE>
<TBODY>
<TR>
<TD>
<DIV id='gform:scan_area'>
<OBJECT></OBJECT>
</DIV>
</TD>
</TR>
<TR>
<TD>
<TABLE style="width:60%">
<TBODY>
<TR>
<TD style="width:20%;padding-right:160px;">
<INPUT>
</TD>
<TD style="width:20%">
<SPAN></SPAN>
</TD>
<TD style="width:20%">
<INPUT>
</TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
</TBODY>
</TABLE>


You need to do it this way
<div style="padding-left: 300px;">
<table>
...
</table>
</div>
For more read this answer: Padding table with CSS doesn't work on IE


Table padding is only applied to cells. By adding it to the <td> you will see it work in IE9 and Firefox. See: W3schools: Tables
<TABLE> // works in firefox but doesn't work in ie9
<TBODY>
<TR>
<TD style="PADDING-LEFT: 300px">
<INPUT>
</TD>
<TD >
<SPAN></SPAN>
</TD>
<TD>
<INPUT>
</TD>
</TR>
</TBODY>
</TABLE>

Related

Bootstrap table rows does not fit headerrow (Angular)

I have a problem using Bootstrap tables in Angular:
My <td> tags does not fit the corresponding <th> from my tableheader: I am not sure, if it is caused due my calls to the template presenting the <td>:
Here is my code:
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Students</th>
<th>Links</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let c of tests">
<app-preview-container id={{c.id}} name={{c.name}} description={{c.description}} studentCount={{Count[c.id]}}"></app-preview-container>
</tr>
</tbody>
</table>
And thats the component which gets called (<app-preview-container>):
<td>
{{name}}
</td>
<td>
{{description}}
</td>
<td>
{{count}}
</td>
<td>
some buttons
</td>
Does anyone has a tip how I can fix that? I have tried a lot using Bootstrap width-params like w-xx or col-md-x or col-x or using scope="col"/"row". But none of these fixed it.

Tables often look that way when you change <tr> / <td> display property. HTML tables have their own unique display properties display: table-row; and display: table-cell;.
You either have done that or wrapped your <td>s with additional div.
You can inspect your table in the console, and check if <td>s are direct children of <tr> and then set by hand <tr> and <td> display property to table-row and table-cell.
An example of a broken table:
td {
border: 1px solid gray;
}
*[style] {
outline: 2px dashed red;
}
<table>
<tr>
<td>
Column 1
</td>
<td>
Column 2
</td>
<td>
Column 3
</td>
</tr>
<tr>
<tr style="display: block;">
<td>
Broken
</td>
<td>
Row
</td>
<td>
!
</td>
</tr>
<tr>
<td style="display: inline-block;">
Broken td
</td>
<td>
!
</td>
<td>
!
</td>
</tr>
<tr>
<td>
Correct
</td>
<td>
row
</td>
<td>
!
</td>
</tr>
</table>

Float an icon or div inside a dynamically generated html table that spans a certain number of rows

I'm working with a html table that's generated dynamically and trying to place an icon/image in a column on the left side that spans the length of multiple table rows. In my example, I would like to place a single image in the colored shaded areas. This needs to be done using html & css. I'll be using the same icon in each block:
Here's a sample of the table structure:
<table border="0">
<tbody>
<tr>
<td>
{dynamic title}
</td>
</tr>
<tr>
<td>
{dynamic description}
</td>
</tr>
<tr>
<td>
{dynamic archives}
</td>
</tr>
</tbody>
</table>
Here's my icon div that needs to go in the shaded areas:
<div class="icon"><i class="far fa-newspaper"></i></div>
Obviously, this ain't gonna work:
<table border="0">
<tbody>
<div class="icon"><i class="far fa-newspaper"></i>
<tr>
<td>
{dynamic title}
</td>
</tr>
<tr>
<td>
{dynamic description}
</td>
</tr>
</div>
<tr>
<td>
{dynamic archives}
</td>
</tr>
</tbody>
</table>

td {
width: 100px;
background: green;
}
<table>
<tr>
<td rowspan=2>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
</table>
You could use rowspan from table to span multiple rows.

Make uneven table layout

When I use <table> with <tr> and <td> I always get NxN tables and not what I want.
For example:
<table border = "1">
<tr> <td> Do you love peanuts? This is a very important question. </td> </tr>
<tr> <td> Yes, I do. </td> <td> No, I don't. </td> </tr>
</table>
And yet, it looks like a 2x2 as one there is a blank square created over the page.
An example is here.
How can I make the first row (with the one element) spread the same as the one with two elements. I'm not talking about minimizing number of lines (in the text) or whatever, I mean just stretching it up to there.

You can solve this using the attribute colspan on the td tag:
<table border = "1">
<tr>
<td colspan="2">
Do you love peanuts? This is a very important question.
</td>
</tr>
<tr>
<td>
Yes, I do.
</td>
<td>
No, I don't.
</td>
</tr>
</table>
Check this link

<html>
<head>
</head>
<body>
<table>
<tr>
<td>
<table border="1">
<tr>
<td width="250px">Do you love peanuts? This is a very important question.</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="1">
<tr>
<td width="250px">
Yes, I do.
</td>
<td>
No, I don't.
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

How to let the character in a table stay at the top

Look at this code:
<table width="100%">
<tbody>
<tr>
<td style="width:20%;"><span>hello world</span></td>
<td style="width:60%;">
<textarea style="width:100%;height:200px;"></textarea>
</td>
<td>
</td>
</tr>
</tbody>
</table>
The "hello world" in the left <td>
just stays at the middle (sometimes even at the bottom),
so what attribute should I set to let the word stay at the top of the table?
Here is an online example at JSFiddle

Just add vertical-align: top; to the td style.
See it here.

<table width="100%">
<tbody>
<tr>
<td style="width:20%;" valign="top"><span>hello world</span></td>
<td style="width:60%;">
<textarea style="width:100%;height:200px;"></textarea>
</td>
<td>
</td>
</tr>
</tbody>
</table>

table inside table td

I have table td inside that am using another table but text and fields are not coming on same line,i have tried with padding,cellso but nothing worked for me
<table>
<tr>
<td> Label </td>
<td>
<table border=0 cellpadding=0 cellspacing=0>
<tr>
<td> <input type=checkbox> Field Name </td>
</tr>
</table>
</td>
</tr>
</table>

Your code is just fine.
What do you think is wrong with it?
I tested it out and it works great.

Your code looks fine
<table border="1">
<tr>
<td>Label</td>
<td>
<table border=0 cellpadding=0 cellspacing=0>
<tr>
<td>
<input type=checkbox />Field Name
</td>
</tr>
</table>
</td>
</tr>
</table>
open this in the browser, and tell me what's wrong with it?