-1

Also, I would like to center verticaly and horizontally things inside div. I tried, but nothing worked for me. I tried, adding absolute position. Then I can set width and height normally, but then I have problems width text(s) inside div: I cant center it vertically

Here is simple code:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<style>

.Table{
background-color:red;
display:table;
height:400px;
width:300px;
}

.Row1{
background-color:blue;
display:table-row;
text-align:center;
vertical-align:middle;
width:20px; 
height:100px;
position:relative;
}

</style>    

<div class="Table">

<div class="Row1">
<p>Row1</p>
<!--<div class="Cell1"></div>
<div class="Cell2"></div>
<div class="Cell3"></div>-->
</div>

<div class="Row2">
<p>Test</p>
</div>
</div>
</body>
</html>

I think one solution is: Display inner div again as table, then set paragraph as table-cell. After that, I can easy center things using align-text or vertically-align. Also I can easily set width and height of this div.

Slit
  • 491
  • 1
  • 7
  • 20
  • You should check out this answer http://stackoverflow.com/a/17521229/3421070 – TheBokiya May 26 '14 at 21:29
  • Similar problem like with table-row. For row I can't change width like I can't change height for cell. I am new to html, so forgive me for asking obviously simple questions. – Slit May 26 '14 at 21:39

1 Answers1

0

You're question really isn't very clear. You cannot set the width of a table-row (it spans the entire width of the table) but you can set the width of a cell.

Here's an example CSS table with content centred in each cell.

HTML:

<div class="table">
    <div>
        <div class="cell1">Cell1</div>
        <div>Cell2</div>
        <div>Cell3</div>
    </div>
    <div>
        <div>Cell4</div>
        <div>Cell5</div>
        <div>Cell6</div>
    </div>
</div>

CSS:

.table {
    /* a table */
    display:table;
    height:400px;
    width:300px;
    border-collapse:collapse;
}
.table > div {
    /* rows */
    background-color:blue;
    display:table-row;
}
.table > div > div {
    /* cells */
    background-color:pink;
    display:table-cell;
    text-align:center;
    vertical-align:middle;
    border:1px solid red;
}
.table .cell1 {
    /* a specific cell */
    width:20px;
    background-color:lime;
}

http://jsfiddle.net/TU9rj/

Moob
  • 14,420
  • 1
  • 34
  • 47
  • Thank you for your reply. I thought I can set width and height normally like i would for any div. But apparently there is no option. How can I set specific size of cells or rows regardless of content inside? Is there a way? – Slit May 26 '14 at 21:51