CODEWITHSUNDEEP
htmlcss-tables
user3282988
user3282988

Reputation: 129

Design a row in a table - CSS

I'm trying to make a table that should look like that (this should be one row in the table):

enter image description here

But I'm new to CSS and its getting weird! This is my code:

HTML:

 <tr>
    <td>
        <div class="instruct"><?= $value->CustomerName;?></div>
        <div></div>
        <div class="instruct" style="width:60%;">
            <?= $value->Building;?>&nbsp;<?= $value->FloorRoom;?>
        </div>
        <div class="instruct" style="width:40%;">1986</div>
    </td>
</tr>

and CSS: 

.instruct
{
    left: 100%;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 45%;
    padding: 8px 10px 10px 10px;
    border: 1px solid #e6e6e6;
    background: #FFEAFE;
    font-size: 105%;
    -webkit-transition: opacity 350ms ease-out;
    -moz-transition: opacity 350ms ease-out;
    -o-transition: opacity 350ms ease-out;
    transition: opacity 350ms ease-out;
}

What am I doing wrong? Its not even close to looking like in the image above.

edit for harry

enter image description here

Upvotes: 1

Views: 98

Answers (6)

Harry
Harry

Reputation: 89760

You can use colspan attribute to achieve this layout without adding additional div tags within td. The numeric value assigned for the colspan instructs on how many columns should be merged into one.

HTML:

<table>
    <tbody>
        <tr>
            <td colspan='2'>Tex1<img src='http://lorempixel.com/64/64' /></td>
        </tr>
        <tr>
            <td>Tex2</td>
            <td>Tex3</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td colspan='2'>Tex1<img src='http://lorempixel.com/64/64' /></td>
        </tr>
        <tr>
            <td>Tex2</td>
           <td>Tex3</td>
        </tr>
    </tbody>

</table>

CSS:

td { /* I have used a generic td selector for demo, but you can assign and use classes */
    opacity: 0.5;
    width: 45%;
    padding: 8px 10px 10px 10px;
    border: 1px solid #e6e6e6;
    background: #AA3333;
    font-size: 105%;
    -webkit-transition: opacity 350ms ease-out;
    -moz-transition: opacity 350ms ease-out;
    -o-transition: opacity 350ms ease-out;
    transition: opacity 350ms ease-out;
    text-align: center;
    border-radius: 8px;
}

tbody{
    display: block;
    background: #FFEAFE; /* the lighter background color for group */
    border-radius: 8px;
    margin-bottom: 8px; /* separator between each group */
}

img{ /* to float the image to the right */
    float: right;
}
td:hover{ /* for a simple hover transition effect */
    opacity: 1; 
}

Final Demo with Image and Hover Effect

Upvotes: 1

Lanei
Lanei

Reputation: 26

I think colspan with a separate table class will do your job =)

<td class="tdClass" colspan=100%>

http://jsfiddle.net/E57t7/1/

Upvotes: -1

Deepu Sasidharan
Deepu Sasidharan

Reputation: 5309

You can try something like this..

HTML

<table>
    <tr>
        <td colspan='2'>Tex1</td>
    </tr>
    <tr>
        <td>Tex2</td>
        <td>Tex3</td>
    </tr>
</table>

CSS

td
{
    background:rgb(241, 211, 211);
    text-align:center;
    border-radius: 5px 5px;
}

Fiddle: FIDDLE

Upvotes: 3

singe3
singe3

Reputation: 2105

You should use something like that :

The colspan="2" attribute in the first <td> will make this cell occupy the place of two cells.

<table>
    <tr>
        <td id="large" colspan="2">Text 1</td>
    </tr>
    <tr>
        <td>Text 2</td>
        <td>Text 3</td>
    </tr>
</table>

Live example

http://jsfiddle.net/58fNe/

Upvotes: 1

prakashstar42
prakashstar42

Reputation: 687

You can try this: 

.instruct
   {
   float:left;
    padding: 8px 10px 10px 10px;
    border: 1px solid #e6e6e6;
    background: #FFEAFE;
    font-size: 105%;
    -webkit-transition: opacity 350ms ease-out;
    -moz-transition: opacity 350ms ease-out;
    -o-transition: opacity 350ms ease-out;
    transition: opacity 350ms ease-out;

    }

Upvotes: 0

Alex
Alex

Reputation: 4669

You want to create this 3 div containers into a table cell ? Because if not, you should have a structure like this :

<table>
   <tr >
      <td colspan='2'>Text1</td>
   </tr>
   <tr>
      <td>Text2</td>
      <td>Text3</td>
   </tr>
</table>

Also, I can explain you how to position your divs in order to have your wanted result.

Upvotes: 1

Related Questions