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 get rid of spaces between images in CSS?

    How to format CSS for 8.5x11 inch printed pages

    How to put CSS and HTML in one page of code? [duplicate]

    How to make semi-transparent select2?

    How to define specific CSS rules for IE9 alone?

    How to set the width of my table columns to a fixed value?

    How to resize CSS Box with increase in content

    How to put banner in css?

    how can I add styles of structure to jquery plugin

    how to get kendo ui mobile style silver

    how to increment CSS ID using PHP programmatically

    With twitter bootstrap, how can I make it so that there's no word wrap in tables without breaking columns?

    How can I target text input fields with CSS?

    How to horizontally and vertically center two images on top of each other?

    How to give multiple arguments to find element by css selector

    How do I place text to the right of a relatively positioned image?

    How to change the content value of iconmoon font?

    How to override css grouped styles

    How to hide a segment of my website using PHP

    HTML: Who takes care show/hide the scrollbar?

    how to make drag and drop jquery?

    Rotation of a div gives a black background on IE, how can I remove it?

    How can I change Javascript Value into percentage instead of pixels

    knockout.js how to bind dynamic css

    How to show/hide div on click with stricly HTML/CSS

    How to to select the last class or last of type in css

    Styling the input type=“file”. How do i display the filepath?

    How to make the contents of an HTML table fit within their cells?

    How to add a class to a menu item that has children

    How to integrate Thread and