Search code examples
htmlcssalignmenthtml-tableelement

Format HTML table elements

This really seems trivial but I'm unable to attain the intended. I'm trying to add a new element to the toolbox(a table within a division). But the newly added element is out of alignment.

The Pass-through and the Window query keep overlapping as shown below. Toolbox

HTML Table

<div style="float: left;" class="toolbox" id="toolbox">
    <table>
    ...
    <tr>
        <td>
            <label class="col-md-4 control-label">Simple Query</label>
        </td>
        <td>
            <div class="squery" id="rId"></div>
        </td>
    </tr>
    <tr>
        <td>
            <label class="col-md-4 control-label">Pass-through</label>
        </td>
        <td>
            <div class="nElem" id="lId"></div>
        </td>
    </tr>
    <tr>
        <td>
            <label class="col-md-4 control-label">Window Query</label>
        </td>
        <td>
            <div class="wquery" id="wId"></div>
        </td>
    </tr>
    ...

CSS Class nElem for the Pass-through

The classes for the other elements, simple query, window query, are all the same as the Pass-through's class. The only difference is the color.

.nElem {
    border: 1px solid #346789;
    box-shadow: 2px 2px 19px #aaa;
    -o-box-shadow: 2px 2px 19px #aaa;
    -webkit-box-shadow: 2px 2px 19px #aaa;
    -moz-box-shadow: 2px 2px 19px #aaa;
    -moz-border-radius: 0.5em;
    border-radius: 0.5em;
    opacity: 0.8;
    width: 120px;
    height: 72px;
    line-height: 80px;
    cursor: pointer;
    text-align: center;
    z-index: 20;
    position: absolute;
    background-color: darkslateblue;
    color: black;
    font-family: helvetica, sans-serif;
    padding: 0.5em;
    font-size: 0.9em;
    -webkit-transition: -webkit-box-shadow 0.15s ease-in;
    -moz-transition: -moz-box-shadow 0.15s ease-in;
    -o-transition: -o-box-shadow 0.15s ease-in;
    transition: box-shadow 0.15s ease-in;   
}

Toolbox(Division within which the table is created) class

.toolbox {
    margin: 0 auto;
    margin-left: 10px;
    width: 230px;
    height:850px;
    padding: 20px;
    font-family: "Helvetica";
    font-size: small;
    background: #f4f4f4;
    border-radius: 3px;
    -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3);
}
Solution

  • Your code is not enough to understand what's exactly wrong. But I'm sure that the main problem is caused by position: absolute; for .nElem, .squery, .wquery and so on. So remove this property and look again. I tried to solve your problem here: http://codepen.io/g1un/pen/ozZNkL

    .nElem {
    /*position: absolute;*/
}