How to style td with input button and text-size button?

Question

How to style td with input button and text-size button?

4k Views Asked by Ruslan Lomov At 03 April 2025 at 20:58

How to make <td> width exactly as input ok button and other input maximum width?And how to set text size of input's value="Ok" :

<div id="resourcelink">
    <form method="POST" action="FeedController">
        <table id="resource-link">
            <tr>
                <td><input type="text" id="resourcelink" name="sourceLink" /></td>
                <td><input type="submit" name="linkSub" value="Ok" /></td>
            </tr>
        </table>
    </form>
</div>
<body>

enter image description here

Css:

input#resourcelink {
    width: 100%;
}

Original Q&A

There are 1 best solutions below

**r3mainer** · Accepted Answer

Instead of <input type="submit">, try using a <button> element. You'll find that it's easier to apply CSS styles to.

If you apply boz-sizing: border-box CSS rules to the form elements, then you can simply give them a width of 100% and they will fill the available space perfectly:

td.wide { width:300px; }
td.narrow { width:100px; }

input[type="text"] {
  font-size:1.5em;
  padding:0.25em;
  box-sizing: border-box;
  width:100%;
}
button[type="submit"] {
  font-size:1.5em;
  padding:0.25em;
  box-sizing: border-box;
  width:100%;
}

<div>
  <form>
    <table id="resourcelink">
      <tr>
        <td class="wide"><input type="text" /></td>
        <td class="narrow"><button type="submit">OK</button></td>
      </tr>
      <tr>
        <td style="background-color:#fa0; height:10px;"></td>
        <td style="background-color:#46f; height:10px;"></td>
      </tr>
      <tr>
        <td colspan="2">(The coloured bars are just here to
                        illustrate the column sizes.)</td>
      </tr>
    </table>
  </form>
</div>
<body>

(Note: border-box rules are supported in all modern browsers, but if you want to support older browsers then you'll have to include workarounds.)

How to style td with input button and text-size button?

There are 1 best solutions below

Related Questions in HTML

Related Questions in CSS

Related Questions in STYLING

Trending Questions

Popular # Hahtags

Popular Questions