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 auto fit input field after dynamically added spans?

    How to center arrow on post carousel

    How implement a button clear in a RadDatePicker

    How to add container without destroying table

    How to get my .toggleClass() menu to work properly?

    how to show background image(multiple) if out of current div

    How to line up a css ::before pseudo element like a grid

    How can I get drop-down functionality working with CSS?

    How to show the first N elements of a block and hide the others in css?

    How to change table cell colour to default on triple click html5/javascript/css

    How to display a header inline with paragraph text using divs or an alternative method

    How to link a header in a standards-compliant way?

    How to apply a class on
  • when mouse is hovering on it?
  • How to keep banner animations running while changing webpages [closed]

    background image of div element can't show in php file

    Hide/show block with CSS

    How to gray out a HTML element

    CSS: How to select only the first non-adjacent sibling after the element

    How to let Fancybox Next and Previous button stay visible

    How to get different class selectors using nth-child in css

    How to modify a div with another div with Css

    How am I supposed to address elements that are not a direct child of a given element in CSS?

    How to get conditional css to work on Blogger/Blogspot?

    HTML/JavaScript - How can I hide the links and cursor?

    How to Auto set the height of a div using the height of another div

    How to include css files into compojure project?

    How can I make buttons flash different background colors when clicked/

    How Do I Add product descriptions (short) to hover box in woocommerce?

    How to align div to the bottom of another div in HTML?

    how to code a stickyfooter in css?