CODEWITHSUNDEEP
htmlcsshtml-tableborder
user10696603
user10696603

Reputation:

How to create Border on a input td in a table?

I created a table in which I want the user be able to give inputs. Now when a td is selected/focused i want to turn the border around it in a color. I already tried that, but when I do that it leaves a thin gap between the inputfield and the td, even if I have set the padding to 0.

@import url('https://fonts.googleapis.com/css?family=Lato:400,700,900');
body {
  font-family: "Lato", sans-serif;
}

input {
  width: 120px;
  height: 20px;
  border: 1px;
  padding: 5px;
  outline: none;
}

input:focus {}

table {
  margin: 50px;
  font-weight: 400;
  border-collapse: collapse;
}

th {
  font-size: 20px;
}

td:focus {
  border: 1.5px solid orange;
}

td,
th {
  font-weight: 900;
  width: 120px;
  border: 1px solid #dddddd;
  text-align: left;
  padding: 0;
}
<body>

  <table>
    <tr>
      <th>Income</th>
      <th>Outgoings</th>
      <th>Taxes</th>
      <th>Total</th>
    </tr>

    <tr>
      <td><input type="text" placeholder="CHF"></td>
      <td><input type="text" placeholder="CHF"></td>
      <td><input type="text" placeholder="CHF"></td>
      <td><input type="text" placeholder="CHF"></td>
    </tr>

I hope somebody can help me.

Upvotes: 1

Views: 1298

Answers (1)

Roko C. Buljan
Roko C. Buljan

Reputation: 206121

Simply add box-shadow to the :focused input.
Box shadow will overlap the parent TD's gray borders giving the desired effect.
It also prevents from moving things around (2px or so) since box-shadow will not trigger a reflow. It just paints.

@import url('https://fonts.googleapis.com/css?family=Lato:400,700,900');
body {
  font-family: "Lato", sans-serif;
}

input {
  width: 120px;
  height: 20px;
  border: 1px;
  padding: 5px;
  outline: none;
}

input:focus {
  box-shadow:  0 0 0 1px orange;
}

table {
  margin: 50px;
  font-weight: 400;
  border-collapse: collapse;
}

th {
  font-size: 20px;
}

td,
th {
  font-weight: 900;
  width: 120px;
  border: 1px solid #dddddd;
  padding: 0;
}
<table>
  <tr>
    <th>Income</th>
    <th>Outgoings</th>
    <th>Taxes</th>
    <th>Total</th>
  </tr>

  <tr>
    <td><input type="text" placeholder="CHF"></td>
    <td><input type="text" placeholder="CHF"></td>
    <td><input type="text" placeholder="CHF"></td>
    <td><input type="text" placeholder="CHF"></td>
  </tr>
</table>

TD can get :focus only if you set a tabindex property to it. But since it's child is an input, that input will steal the focus, never propagating to TD.

Upvotes: 1

Related Questions