html table td's and tr's disappearing - html

I'm going though something quite weird. I was working on a chat system with the rows and stuff based on tables, but the formatting kept messing up. I wondered why until I looked at the part of the source which was not working, which looked like this:
<table border="0">
<tbody>
<tr class="chatline" style="background:white;border-style:none;border-top:1px solid grey;padding:0px;">
<td style="background:#A0D7FF;margin:0px;width:1%;"><span style="padding:2px;background:#A0D7FF;color:black;height:100%;border-right:1px solid grey;">kpsuperplane</span></td>
<td style="color:black;background:white;"><span style="color:black;padding:2px;">test</span></td>
</tr>
<tr class="chatline" style="background:white;border-style:none;border-top:1px solid grey;padding:0px;">
<td style="background:#A0D7FF;margin:0px;width:1%;"><span style="padding:2px;background:#A0D7FF;color:black;height:100%;border-right:1px solid grey;">kpsuperplane</span></td>
<td style="color:black;background:white;"><span style="color:black;padding:2px;">test</span></td>
</tr>
</tbody>
</table>
However, when I view it through dev tools in chrome, I get this:
<table border="0">
<tbody>
<span style="padding:2px;background:#A0D7FF;color:black;height:100%;border-right:1px solid grey;">kpsuperplane</span>
<span style="color:black;padding:2px;">test</span>
<span style="padding:2px;background:#A0D7FF;color:black;height:100%;border-right:1px solid grey;">kpsuperplane</span>
<span style="color:black;padding:2px;">test</span>
</tbody>
</table>
Any idea why this is happening? The td's and tr's are automatically removed from the document when they are rendered. And this is not chrome specific. Live code in dreamweaver gives the same puzzling result.
Pic below:

I tested this in jsfiddle and it doesn't seem to be a problem. I also tested it in my own environment (chrome) and it works fine. Try looking for an unclosed tag in code above the table.
Edit:
Paste the code into w3c validator http://validator.w3.org/check. I found 13 errors/warning in the html. Check out the errors and the specific line numbers.
I found that you have div tags within the table, but they are not wrapped by a tr. I'm sure you'll be able to find the rest within the validators output.

According to your jsfiddle: you have simple mistake in HTML structure, here is copy paste;
</tr>
</table>
</div>
<tr class="chatline" style="background:white;border-style:none;border-top:1px solid grey;padding:0px;">
you close table and then you do not open it. ctrl + f and type /table. I suggest you just going carefully through it and make valid html ;)

Sorry it is not an answer, but it won't let me comment.
I tried same code in chrome using Dev Tools it is showing me tr and td's, so I am not what is happening in your case. I enclosed above code into html and body tags.

Related

jupyter notebook html table cannot display

why jupyter notebook cannot display html 'table', but other html elements are okay, and how can I solve this problem?
below is my source code and my result
source code
<table style="width:20%">
<tr>
<td> **L1** </td>
<td> 1.1 </td>
</tr>
</table>
result
<tr>
<td> **L1** </td>
<td> 1.1 </td>
</tr>
it only removes tag <table> and does nothing else.
That's interesting, because the table (created by pasting your code) comes out just fine for me:
From my personal experience, I can definitely say that Markdown in jupyter notebooks is somehow volatile/unpredictable when it comes to HTML. For example, I myself have been looking for a fix for Jupyter just arbitrarily doing line breaks in the table header (esp. in formulas) and I have found this fix, but it doesn't work for me at all.
I know this is not particularly helpful, but at least it demonstrates that the table not being rendered correctly in your case was either some unexpected behaviour or some bug which maybe, or maybe not, has been fixed in the course of the last year.
You can also add the magic command before the table tag, which worked for me.

How to remove table border?

I know there are many such posts, but none of the solutions works for me. I am using wordpress.com, which is extremely poor and has lots of flaws in general. So I just wonder if that is just one more "constraint" which wasn't mentioned along with the billing.
I have a simple HTML code, which works perfectly well in http://www.w3schools.com interpreter. It doesn't work when using wordpress.com.
<table border="0">
<tbody>
<tr>
<td align="center" width="90%">A</td>
<td align="center">B</td>
</tr>
</tbody>
</table>
I have tried border-collapse property as well. How to remove table borsers, or how to work around this problem?
I found the tip which works. This is wordpress.com specific issue. Solution is given here. It has to be stated
<table style="border:none;">
and in each cell
<td style="border:none;">
Have you tried this?
<table style="border: none; border-collapse: collapse;" border="0">
You can also check your styles.css and see if there are specific styles for your table.
If you want to target a specific table then just use an ID or a class instead.
.table, .td, th {
border: 0;
}
If still not working add border: 0 !important; and make sure that the css is rendered on your views by checking via inspect element...

Phantom Showing up in my page

I have a page written in HTML/ASP that has a series of nested tables that I use for formatting the page the way I want it.
When the page loads however there is a white space between the two tables that is not in the code and when I inspect it in chrome it shows the code has a &nbsp character between them.
Why is this appearing in the page when it loads but it is not in the script? How can I remove it?
<table width=100% border=2 cellpadding=0>
<tr>
<table width=100%>
<tr>
<th width=10% align="right">Destination:</th>
<td width=60%>Here</td>
<td width=10% align="right">Date:</td>
<td width=20% align="left"> <%=FormatDateTime(d,2)%></td>
</tr>
</table>
</tr>
<tr>
<table width = 100%>
<tr>
<td width=2%> </td>
<td align="right">Time1:</td>
<td align="center"><%=formatTime(oRS1("time"))%></td>
<td><%=oRS1("location")%></td>
<td width=40> </td>
<td align="right">Driver</td>
<td> <%=fpn%></td>
</tr>
<tr>
</table>
I just had this same issue and here are the steps that I tried that eventually fixed it:
Cleared the cache in the browser
Cleared all browser data
Tried a different browser
None of the above worked in my case, and the phantom was not in my code (and I triple checked it!!!!), but it was obviously somewhere since it was showing in the console and other browsers:
So, (and this may not be the best way to solve this but it worked) as you can see from my console output, I added two paragraph tags above and two below (by carefully putting the cursor in front of the next element and using a carriage return and the arrow key to go back up) to get the phantom in the middle. After that I saved it, then proceeded to select and delete the two paragraph tags in the middle together (with the phantom between them). This is what finally worked, the delete of both the elements surrounding it together took the phantom with it...
Perhaps some small part of my html page became corrupted? Who knows... but if anyone else is having this issue, give this a try.

Newsletter layout crashes with Gmail

I've actually created a template on Mailchimp. I used a basic template of Mailchimp and transformed it into the design they gave me. I used the the CSS inline tool of Mailchimp to insert all the code in an inline mode as Gmail does not accept any style on the header. I only have this issue on Gmail, the rest work perfectly. What can I do?
As the code is long I inserted it in a fiddle if you wish to check it out:
http://jsfiddle.net/z27Bw/
I need an answer as its a mystery for me!
You have 2 unclosed <td> tags in the HTML -- one on line 476, one on 482. That might be what's causing the issue in Gmail. If that doesn't fix it, I'd say yeah, it might be a colspan issue.
you can try this
Write first tr code like this
<tr>
<td colspan="2" height="281"> </td>
</tr>
instead of
<tr>
<td width="35" height="281"> </td>
<td class="headerContent"> </td>
</tr
>
and then put that big header image inside it.

HTML table - space between rows

I am seeing a different behavior between Firefox and Chrome for the same HTML table.
Firefox: the space between rows are equally divided.
Chrome: the space between rows are NOT equally divided.
Could someone tell me what is going on?
jsfiddle.net
<html>
<body>
<table border="1" width="100%">
<tr>
<td rowspan="3">AAA</td>
<td>BBB</td>
<td rowspan="3"CCC<br/>CCC<br/>CCC<br/>CCC<br/>CCC<br/>CCC<br/>CCC<br/>CCC<br/>CCC<br/>CCC<br/></td>
</tr>
<tr>
<td>BBB</td>
</tr>
<tr>
<td>BBB</td>
</tr>
</table>
</body>
</html>
It's a known rendering issue with Chrome/Webkit browsers.
A user provided a solution here: Table cells bad rendering with Google Chrome/Webkit
You need to use close the tag by using <br/> instead of <br>.
In compliant XHTML, all tags need to be properly closed. In this case, instead of closing the tag with </br>, you use the trailing / to do it.
<br></br>
is equivalent to
<br/>
You would do the same thing with an image element:
<img src="..."/>
Had a similar issue where I get 1px space between rows in Chrome but not in other browsers. It was solved when I added the following in the the CSS.
td{
padding: 0px 0px;
position:relative;
}
The key point is setting td to "position:relative". For some reason it solved the issue. Maybe the same could help in this situation.
What if you close the third <td...
<td rowspan="3"CCC
<td rowspan="3">CCC