Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Table cells larger than they are meant to be

Tags:

html

css

I've created a map system for a game that runs on the principle of drawing the picture of the map from tiles. There are many reasons for this which I won't go into here but if you really want to know then I'm sure you can find out how to contact me ;)

I have made the latest version live so you can see exactly where the problem lies and the source. The issue is the line between the top 2 tiles and the bottom 2 tiles, I can't figure out why it's gone like this and any help would be appreciated.

In the source is a marker called "stackoverflow", if you search for "stackoverflow" when viewing source then it should take you to the table in question.

I have also uploaded an image of the issue.

like image 278
Teifion Avatar asked Aug 22 '08 09:08

Teifion


People also ask

How do you make a cell table bigger?

Adjust cells to fit the text with AutoFit To adjust a column, select it, and then select Layout > AutoFit > AutoFit Contents. To adjust a table, select it, and then select Layout > AutoFit > AutoFit Contents.

How fix TD table width?

Using width attribute: The <td> tag has width attribute to control the width of a particular column. By assigning a numeric value to this attribute between 0 to 100 in terms of percentage(or you can use pixel format). We can restrict the column width up to that much percentage of the table's total width.

How fix HTML table size?

To set the table width in HTML, use the style attribute. The style attribute specifies an inline style for an element. The attribute is used with the HTML <table> tag, with the CSS property width.

How do you change the width of a table cell in CSS?

Complete HTML/CSS Course 2022 The height and width attribute of the <td> cell isn't supported in HTML5. Use the CSS property width and height to set the width and height of the cell respectively. Just keep in mind, the usage of style attribute overrides any style set globally.


2 Answers

I think you need to use display: block on your images. When images are inline there's a little extra space for the line spacing.

like image 117
Daniel James Avatar answered Oct 05 '22 10:10

Daniel James


You could also adjust the line height of the td element:

td {
    line-height: 0
}
like image 34
GateKiller Avatar answered Oct 05 '22 11:10

GateKiller