CODEWITHSUNDEEP
html
user3428422
user3428422

Reputation: 4560

HTML table column <td> width dependant on rest of table

I have a table that in one column shows a label of what the input is and then a second column displays the type of input. However, I have two radio buttons but I want the width of the two radio buttons smaller and not dependant on the rest of the html table.

Example.

<table style="line-height:30px;">
    <tr>
        <td>
            <label>test</label>
        </td>
        <td width="50px"></td>
        <td>
            <input type="text" />
        </td>
    </tr>
    <tr>
        <td>
            <label>example</label>
        </td>
        <td width="50px"></td>
        <td>
            <input type="radio" name="example" value="1"/> 1
        </td>
        <td>
            <input type="radio" name="example" value="2"/> 2
        </td>
    </tr>
</table>

Which looks like

enter image description here

But I want the 2 radio button to be moved closer to the number 1 radio button, how would I achieve this?

Thanks

Upvotes: 0

Views: 133

Answers (2)

Gerald Goshorn
Gerald Goshorn

Reputation: 65

I would recommend not using tables as they are deprecated. I used a div based layout and assigned classes. In doing so you have more control over the content. Here is what i came up with. You can modify it to style the radio buttons as you like.

    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>center a div within a div?</title>

<style type="text/css">

.text-input{
    text-align: center;
    padding: 10px;
    color: green;
}

.label{
    padding: 15px;
}

.enter-text:hover{
    border: thin solid #000099; 
}


.radio-buttons{
    text-align: center;
    padding: 10px;
}

.radio{
    margin-left: 30px;
}

.radio2{
    margin-left:59px;
}

</style>

</head>

<body>

<div class="text-input">
    <label class="label">test</label>
    <input type="text" class="enter-text" />

</div>

<div class="radio-buttons">
    <label>example</label>
    <input type="radio" name="example" value="1" class="radio"/> 1
    <input type="radio" name="example" value="2" class="radio2"/> 2
</div>
</body>
</html>

Upvotes: 0

Joel Joel Binks
Joel Joel Binks

Reputation: 1666

Try this (same as yours except for the colspan attribute):

<table style="line-height:30px;">
<tr>
    <td>
        <label>test</label>
    </td>
    <td width="50px"></td>
    <td colspan="2">
        <input type="text" />
    </td>
</tr>
<tr>
    <td>
        <label>example</label>
    </td>
    <td width="50px"></td>
    <td>
        <input type="radio" name="example" value="1"/> 1
    </td>
    <td>
            <input type="radio" name="example" value="2"/> 2
        </td>
    </tr>
</table>

Upvotes: 1

Related Questions