2

Как-то видел тут потрясающее решение, чтобы сделать такой вывод точек от текста до блока справа с цифрами. Пример заполнения точками пространства между блоками

К сожалению, сейчас найти не могу. Подскажите, пожалуйста, какими средствами это можно сделать, если будет вывод таким:

table {
    border: 1px solid black;
}

td {
    vertical-align: bottom;
}

td:first-child {
    width: 100px;
}

td:last-child {
    text-align: right;
}
<table>
    <tr>
        <td>Некоторый текст</td>
        <td>10</td>
    </tr>
    <tr>
        <td>Текст</td>
        <td>1000</td>
    </tr>
</table>

Повторюсь, нужно чтобы от слова "текст" до цифр шли точки как на скриншоте... Подходит решение как на чистом CSS, так и на JS и JQuery.

3
  • Раз мой ответ Вам не подошёл - удаляю. Менять вопрос после того, как дали ответы, как-то не то, ибо время было потрачено на поиск решения конкретной приведённой проблемы.
    – UModeL
    5 мар 2021 в 17:33
  • Удалять было не нужно, решение было рабочим но к вопросу просто был добавлен параметр
    – Alexandr
    5 мар 2021 в 17:50
  • раз сняли галочку, значит решение неверное - фтопку.
    – UModeL
    5 мар 2021 в 17:53

2 ответа 2

1

Повторюсь, нужно чтобы от слова "текст" до цифр шли точки как на скриншоте... Подходит решение как на чистом CSS, так и на JS и JQuery.

Судя по вашему вопросу, я так полагаю, мы можем воспользоваться любыми средствами, но мы не можем трогать разметку HTML. В таком случае вот вам решение на JS + незначительные дополнения к вашему CSS (не нарушая структуру или свойства таблицы). Это решение всегда железно будет работать у вас визуально красиво в том случае, если в правых ячейках таблицы будут использоваться цифры. Это может быть любая нумерация, стоимость или что-то еще, не суть важно, главное - это небольшое количество знаков. Вы можете конечно размещать в правых ячейках и текст, но тогда нужно будет регулировать ширину правого столбца, что будет не совсем удобно, но совсем не сложно. Но я и не стремился подгонять это решение под такой универсальный формат вывода, учитывая, что в вашем вопросе четко сказано "до цифр".

Как-то видел тут потрясающее решение, чтобы сделать такой вывод точек от текста до блока справа с цифрами.

Вы не могли видеть никакого потрясающего решения, а точнее сказать - для вас любое ранее найденное решение потрясающим не будет, потому что вы берете за основу таблицу. Я по крайней мере такого решения еще не встречал, которое бы решало именно вашу задачу. Однако, если для вас это не столь важно и с помощью CSS вы готовы таблицу "превращать" в любой блочный элемент, тогда в этом случае руки полностью развязываются и потрясающее решение создать будет совсем не сложно. Но это уже другой вопрос.

На ваш вопрос я ответил. Успехов!

document.addEventListener("DOMContentLoaded", () => {
  let table = document.querySelector('.table');
  let tr = table.getElementsByTagName('tr');
  let td = null;
  for (var i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td");
    let text = ".";
    td[0].innerHTML = `<span>${td[0].innerHTML}</span>${'.'.repeat(1000)}`;
    td[1].innerHTML = `<span>${text.repeat(1000)}${td[1].innerHTML}</span>`;
  }
});
* {margin: 0; padding: 0; border: none;}

table {
  border: 1px solid black; border-spacing: 0 10px; line-height: 1;
}

td {
  vertical-align: bottom;
}

td:first-child {
  width: 100px; max-width: 100px; overflow: hidden;
}

td:last-child {
  width: auto; min-width: 55px; max-width: 100px;
  position: relative; overflow: hidden; text-align: right;
}

td:last-child>span {
  position: absolute; bottom: 0; right: 0;
}
<table class="table">
  <tr>
    <td>Некоторый текст</td>
    <td>10</td>
  </tr>
  <tr>
    <td>Текст</td>
    <td>1000000</td>
  </tr>
  <tr>
    <td>Некоторый очень длинный текст</td>
    <td>1</td>
  </tr>
</table>

upd/

document.addEventListener("DOMContentLoaded", () => {
  let table = document.querySelector('.table');
  let tr = table.getElementsByTagName('tr');
  let td = null;
  for (var i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td");
    let text = ".";
    td[0].innerHTML = `<span>${td[0].innerHTML}</span>${'.'.repeat(1000)}`;
    td[1].innerHTML = `<span>${text.repeat(1000)}${td[1].innerHTML}</span>`;
  }
});
* {margin: 0; padding: 0; border: none;}

table {
  border: 1px solid black; border-spacing: 0 10px; line-height: 1;
}

td {
  vertical-align: bottom;
}

td:first-child {
  width: 100px; max-width: 100px; overflow: hidden;
}

td:last-child {
  width: auto; min-width: 120px; max-width: 150px; /*здесь выставляем нужную нам минимальную и максимальную ширину правой ячейки*/
  position: relative; overflow: hidden; text-align: right; white-space: nowrap; /*здесь добавляем свойство white-space: nowrap; которое запрещает переносить слова на новую строку. Хотя, оно не столь нужно*/
}

td:last-child>span {
  position: absolute; bottom: 0; right: 0;
}
<table class="table">
  <tr>
    <td>Некоторый текст</td>
    <td>10</td>
  </tr>
  <tr>
    <td>Текст</td>
    <td>1000000</td>
  </tr>
  <tr>
    <td>Некоторый очень длинный текст</td>
    <td>1</td>
  </tr>
  <tr>
    <td>Некоторый длинный текст</td>
    <td>20*20 см</td>
  </tr>
  <tr>
    <td>Некоторый текст</td>
    <td>Короткий текст</td>
  </tr>
</table>

3
  • Решение помогло, спасибо! Такой вопрос, что если я захочу модифицировать правую сторону таблицы на вид по типу "20*20 см", не подскажете где корректировать?
    – Alexandr
    6 мар 2021 в 20:47
  • Нет. Если писать текст и цифры вместе. Прям вот написать как есть "20*20 см" Я просто попробовал расширить и там поехало всё, а поковыряв код не получилось исправить
    – Alexandr
    6 мар 2021 в 23:02
  • Или я дурак, или лыжи не едут. При любом размере при добавлении текста он на новую строку сбрасывается
    – Alexandr
    7 мар 2021 в 21:51
1

Можт быть, вот так?)

td {
  vertical-align: bottom;
}
<table>
  <tr>
    <td>Некоторый текст</td>
    <td>............</td>
    <td>10</td>
  </tr>
</table>

4
  • @UModeL уважаемый, а зачем оно там нужно? 5 мар 2021 в 5:49
  • @UModeL я не спрашиваю, что оно делает, я спрашиваю, зачем оно? 5 мар 2021 в 8:27
  • Отвратительный костыль без адаптива, уж извините)
    – Alexandr
    5 мар 2021 в 12:22
  • @Alexandr каков вопрос, таков и ответ :) Ваш вопрос нужно чтобы от слова "текст" до цифр шли точки как на скриншоте - мой ответ его успешно решает)) 5 мар 2021 в 13:04

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.