How do you build an HTML table with all rows and cells adjecent to each other?_问答_开发者

How do you build an HTML table with all rows and cells adjecent to each other?

开发者 https://www.devze.com 2023-02-21 01:20 出处：网络

Could someone help me resolve the discrepancies between the following two cases. In both cases I have split an image into several pieces and placed them in a table so that it still appears to be a sin

相关专题：css doctype

However, in one case, I have set the doctype to and in the other there is no doctype set. My expected result is shown when there is no doctype set ( no border-spacing or cellspacing or any other spaces between the cells and the rows). However, when the doctype is set, there is a 1px padding in-between rows.

The HTML for both cases is the same except for the doctype

<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
    .table{
        display: table;
    }

    .row{
        display: table-row;
    }

    .cell{
        display: table-cell;
    }
</style>
</head>
<body>
    <div id='slider' class='table'>
        <div class='row'>
            <div class='cell'><img src='slides/1/1_01.gif' alt='slide' /></div>
            <div class='cell'><img src='slides/1/1_02.gif' alt='slide' /></div>
            <div class='cell'><img src='slides/1/1_03.gif' alt='slide' /></div>
            <div class='cell'><img src='slides/1/1_04.gif' alt='slide' /></div>
            <div class='cell'><img src='slides/1/1_05.gif' alt='slide' /></div>
            <div class='cell'><img src='slides/1/1_06.gif' alt='slide' /></div>
        </div>
        <div class='row'>
            <div class='cell'><img src='slides/1/1_07.gif' alt='slide' /></div>
            <div class='cell'><img src='slides/1/1_08.gif' alt='slide' /></div>
            <div class='cell'><img src='slides/1/1_09.gif' alt='slide' /></div>
            <div class='cell'><img src='slides/1/1_10.gif' alt='slide' /></div>
            <div class='cell'><img src='slides/1/1_11.gif' alt='slide' /></div>
            <div class='cell'><img src='slides/1/1_12.gif' alt='slide' /></div>
        </div>
        <div class='row'>
            <div class='cell'><img src='slides/1/1_13.gif' alt='slide' /></div>
            <div class='cell'><img src='slides/1/1_14.gif' alt='slide' /></div>
            <div class='cell'><img src='slides/1/1_15.gif' alt='slide' /></div>
            <div class='cell'><img src='slides/1/1_16.gif' alt='slide' /></div&开发者_JS百科gt;
            <div class='cell'><img src='slides/1/1_17.gif' alt='slide' /></div>
            <div class='cell'><img src='slides/1/1_18.gif' alt='slide' /></div>
        </div>
    </div>
</body>
</html>

could someone explain to me why there is a 1px gap between the rows when the doctype is set to HTML ?

@Shafee: Try --

.row img {
    display: block;
}

Edit

Short explanation: your code with the DOCTYPE was triggering strict mode in your browser which handles the display of images differently.

Longer explanation:

In the early days, experiments with strict mode invariably raised the comment that images suddenly got an odd bottom margin that couldn’t be removed. The cause was that in strict mode <img /> is an inline element, which means that some space should be reserved for possible descender characters like g, j, or q. Of course an image doesn’t have descender characters, so the space was never used, but it still had to be reserved.

The solution was to explicitly declare images block level elements: img {display: block}.

Nonetheless browser vendors, Mozilla especially, thought this was such a confusing situation that they introduced "almost strict mode". This was defined as strict mode, but with images continuing to be blocks, and not inline elements.

Most common doctypes, including the one I use, trigger almost strict mode. The treatment of images is by far the most important difference between almost strict mode and really strict mode.

Source: http://www.quirksmode.org/css/quirksmode.html

Remove whitespace around your elements.

Charles Upsdell's site has more info on how DOCTYPE affects rendering generally.