Как создать Границу на входе тд в таблицу? - PullRequest
Новая
       27

Как создать Границу на входе тд в таблицу?

0 голосов
/ 30 декабря 2018

Я создал таблицу, в которую я хочу, чтобы пользователь мог вводить данные.Теперь, когда ТД выбран / сфокусирован, я хочу повернуть границу вокруг него в цвете.Я уже пробовал это, но когда я делаю это, он оставляет тонкий разрыв между полем ввода и тд, даже если я установил отступ на 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>

Я надеюсь, что кто-нибудь может мне помочь.

1 Ответ

0 голосов
/ 30 декабря 2018

Просто добавьте box-shadow к вводу :focus.
Тень блока будет перекрывать серые границы родительского TD, давая желаемый эффект.
Он также предотвращает перемещение объектов (2 пикселя или около того), так как box-Shadow не будет вызывать оплавление.Он просто рисует. 

@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 может получить :focus, только если для него установлено свойство tabindex.Но так как его дочерний элемент является входным, этот вход украдет focus, никогда не передаваясь в TD.

...