Inspiring

Answered

Cannot figure out a HTML glitch

Forum|Forum|7 years ago
November 27, 2018
4 replies
835 views

I'm trying to fix a table for a colleague. Below is the screen shot of what's happening - you'll see how the cell lines are broken down where Customer Service is:

Here's the code snippet:

C

</td>

Customer Service

</td>

</td>

</tr>

T

</td>

Technical Service

I've tried a million things and cannot figure it out. Any help is appreciated.

PS - I'm aware there is a lot of garbage code in the above. I did not add that code into it as the system did.

This topic has been closed for replies.

Correct answer Paul-M

this inline style:

border-style: none solid solid none;

change to:

border-style: solid;

That might sort the issue in short-term but think about a completely new codebase

Post the entire page if you need more help.

BenPleysier

Community Expert

Try the following

<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 <meta name="description" content="">
 <meta name="author" content="">
 <title>Table example</title>
 <style>
 table.mytable {
 font-family: "Times New Roman", Times, serif;
 border-collapse: collapse;
 }
 table.mytable tr {
 border: 1px solid black
 }
 table.mytable td {
 border: 1px solid black;
 padding: 0.5em;
 width: 80px;
 text-align: center;
 }
 table.mytable td[rowspan] {
 width: 200px;
 }
 table.mytable td:last-child {
 width: 300px;
 text-align: left;
 }
 </style>
</head>
<body>
 <table class="mytable">
 <tr>
 <td rowspan="2">G-Customer Service</td>
 <td>C</td>
 <td>Customer Service</td>
 </tr>
 <tr>
 <td>T</td>
 <td>Technical Service</td>
 </tr>
 </table>
</body>
</html>

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

P

Paul-MCorrect answer

Legend

this inline style:

border-style: none solid solid none;

change to:

border-style: solid;

That might sort the issue in short-term but think about a completely new codebase

Post the entire page if you need more help.

Paul-M - Community Expert

Deaf_GuyAuthor

Inspiring

Thank you for your help it works.

ALsp

Legend

As the others have said, you need to post either a entire table or a link to a test page that contains the entire table. It should be very easy to one or the other. Now, consider the first 3 lines of the code you did provide:

<td style="background: white; border-style: none solid solid none; padding: 0in 5.4pt; height: 0.2in;">

Styling the td like that is highly inefficient, and as someone else said, there is no reason ever to set height. That is followed by a font tag, which is deprecated and no longer valid. Fonts need to be set via CSS. The third line contains a paragraph with an invalid align attribute.

To style a table, you should assign the entire table a CSS class or an ID and then use descendant classes and descendant pseudo classes to style what's inside.

So, to get a reasonable solution you need to show an example of the entire table. It would also help if you stated your estimated coding and CSS skills level.

Nancy OShea

Community Expert

This is only a portion of the entire code. Have you validated the entire code for errors?

The W3C Markup Validation Service

Nancy O'Shea— Product User & Community Expert

Deaf_GuyAuthor

Inspiring

Hi - yes I'm aware of that and I didn't feel too comfortable sending the entire table. I'm sorry I was hoping someone here could just pick up the glitch by just looking at it.

I did upload it to validation and it says something about the height(?)

Nancy OShea

Community Expert

Height is determined by content inside the element, not explicit values.

Nancy O'Shea— Product User & Community Expert

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded