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


Tags: html,css,styling

Problem :

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%;
}


Solution :

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.)


    CSS Howto..

    How to use Aural CSS?

    How to set a max-width only to text nodes not in a tag?

    how to Styling a “choose file” button using css Only

    How to break a overflowed navigation bar via CSS

    CSS how to push text away from border

    How to align right-to-left the elements of css menu

    How do I get CSS table columns to line up?

    How come half the triangle is missing

    How to make a moving dashed border with CSS?

    How can I 'page zoom' on mobile browser

    GridView Non-Visible Row Showing up in Empty Data Row

    How to create custom shapes with pseudo classes in CSS3

    How to remove margin on horizontal list line break?

    How to pinch the middle of a line in css

    How do I correct overlapping spacing error in CSS when it wraps text?

    How to add js and css files in ASP.net Core?

    Jquery Mobile CSS Android Styling Boarders Not Showing On Button

    How to keep div height fixed during changing its content?

    How to animate image swap on hover

    How to Change Css coding with a link [closed]

    How to style nested panel controls in ASP.NET

    How to get page content to stretch and stick footer to bottom of page?

    On a web page how do I display a label that changes to a drop down box on hover

    How to apply css to asp.net LinkButton?

    how can I shape the image size according to its nested box

    How to handle hiding dynamic elements in JQUERY with different names but same CSS class

    How come the exact same version of Google Chrome shows different layout?

    How to include SASS into CSS

    How can I make an unclickable HTML “Ghost” Div?

    How to toggle a separate drop down beneath a grid of items using JQuery?