Input with size attribute overlaps table cell-CodePudding

I try to use this HTML/CSS code with a small screen size (500px wide).
The first input element works as expected: The size gets limited by the "max-width: 100%".

When I put the same input field in a table cell, the "max-width" seems to be ignored: The input overlaps the cell/viewport and a scrollbar is displayed.

How can I limit the width to the table cell width (which is 70% of the viewport) ?
Using css "width" on the input field instead of HTML "size" is not an option, since I want to keep some legacy code that contains the "size" attribute.

Info: Unfortunately I need to keep the legacy HTML code that contains of a lot of tables and "size=whatever" within. I want to do changes only on CSS layer. The provided code is just a simplified version to show the problem.

<!DOCTYPE html>
<html lang="de">

<head>
  <meta charset="iso-8859-1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="content-language" content="de">
  <meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
</head>

<body>

  <div style="max-width: 100%;">

    ok:<br/>
    <input style="width:auto; max-width: 100%; box-sizing: border-box;" type="text" size=120 ">    


    not ok:<br/>
    <table width="100% " border=1>
        <tr>
            <td width="30% ">
                Label
            </td>
            <td width="70% ">
                <input style="width:auto; max-width: 100%; box-sizing: border-box; " type="text " size=120">
    </td>
    </tr>
    </table>

  </div>

</body>

</html>

CodePudding user response：

I feel like you are complicating it too much by adding a table tag.. if you want it to do the exact same thing as the input above why not just do:

<!doctype html>
<html lang="de">

<head>
    <meta charset="iso-8859-1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="content-language" content="de">
    <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
</head>

<body>
    <div style="max-width: 100%;">
        <div><label for="ok">ok:</label>
            <input id="ok" style="width:auto; max-width: 100%; box-sizing: border-box;" type="text" size="120" />
        </div>
        <div>
            <label for="not-ok">not ok:</label>
            <input id="not-ok" style="width:auto; max-width: 100%; box-sizing: border-box;" type="text" size="120" />
        </div>
    </div>

</body>

</html>

also your code had a few mistakes like some missing " and a random <p/> just floating around, be careful as all these things can affect your code.

Also as pointed out in the comments, using <br> is not a very good practice when you can make your code look much simples and cleaner by wrapping things in divs.

CodePudding user response：

Add table-layout: fixed to the style of the table (either through inline styles or through a stylesheet). By default, tables can grow and shrink according to their contents. Setting the table to fixed layout will make the browser calculate a set width for the cell, and therefore be able to calculate min-width: 100% correctly.

table {table-layout: fixed;}

<!DOCTYPE html>
<html lang="de">

<head>
  <meta charset="iso-8859-1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="content-language" content="de">
  <meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
</head>

<body>

  <div style="max-width: 100%;">

    ok:<br/>
    <input style="width:auto; max-width: 100%; box-sizing: border-box;" type="text" size=120 ">    


    not ok:<br/>
    <table width="100% " border=1>
        <tr>
            <td width="30% ">
                Label
            </td>
            <td width="70%">
                <input style="width:auto; max-width: 100%; box-sizing: border-box; " type="text " size=120">
    </td>
    </tr>
    </table>

  </div>

</body>

</html>