Граница css не отображается в таблице при добавлении в div

Я добавляю таблицу строк и добавляю ее в div в jQuery. Все работает, за исключением того, что граница таблицы не отображается. Если я ввожу таблицу прямо в div, то граница CSS работает.

var show = "<table class='tableNumbersChart'>";
show += "<tr>";
show += "<th colspan=4>Numbers</th>";
show += "</tr>";
show += "<tr>";
show += "<th>#</th>";
show += "<th>1</th>";
show += "<th>2</th>";
show += "<th>3</th>";
show += "</tr>";
show += "<tr><td>A</td><td>B</td><td>C</td></tr>";
show += "</table>"

$('#displayNumbersChart').append(show);

.tableNumbersChart {
  border: 1px;
  vertical-align: center;
  text-align: center;
}

.tableNumbersChart th {
  background-color: rgb(248, 159, 156);
}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id = "displayNumbersChart"></div>

html jquery css

30.03.2021 22:37

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Ответы 2

Вы не упомянули какой-либо тип границы (сплошная, пунктирная и т. д.) В приведенном выше CSS для table, th, td.

.tableNumbersChart {
  border: 2px solid green;
}
.tableNumbersChart th, td {
  border: 1px solid blue;
}

$(document).ready(function(){

var show = "<table class='tableNumbersChart'>";
show += "<tr>";
show += "<th colspan=4>Numbers</th>";
show += "</tr>";
show += "<tr>";
show += "<th>#</th>";
show += "<th>1</th>";
show += "<th>2</th>";
show += "<th>3</th>";
show += "</tr>";
show += "<tr><td>A</td><td>B</td><td>C</td><td>D</td></tr>";
show += "</table>"

$('#displayNumbersChart').append(show);

});

.tableNumbersChart {
  border: 1px solid red;
  vertical-align: center;
  text-align: center;
}
.tableNumbersChart {
  border: 2px solid green;
}
.tableNumbersChart th {
   background-color: rgb(248, 159, 156);
}
.tableNumbersChart th, td {
  border: 1px solid blue;
  padding:5px;
}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id = "displayNumbersChart"></div>

В вопросе не упоминаются границы ячеек - только граница таблицы. Кроме того, вы изменили исходный код, скрывая проблему.

— 30.03.2021 22:57

30.03.2021 22:54

Свойство CSS border является сокращением для нескольких свойств. Таким образом, он ожидает тип границы.

var show = "<table class='tableNumbersChart'>";
show += "<tr>";
show += "<th colspan=4>Numbers</th>";
show += "</tr>";
show += "<tr>";
show += "<th>#</th>";
show += "<th>1</th>";
show += "<th>2</th>";
show += "<th>3</th>";
show += "</tr>";
show += "<tr><td>A</td><td>B</td><td>C</td></tr>";
show += "</table>"

$('#displayNumbersChart').append(show);

.tableNumbersChart {
  border: 1px dashed; /* <-- type needed */
  vertical-align: center;
  text-align: center;
}

.tableNumbersChart th {
  background-color: rgb(248, 159, 156);
}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id = "displayNumbersChart"></div>

30.03.2021 23:00

Другие вопросы по теме

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

Неожиданное сообщение об ошибке JavaScript (Uncaught SyntaxError: ожидаемое выражение, получено '}')

Bootstrap modal js дает сообщение Synchronous XMLHttpRequest в основном потоке - это устаревшее сообщение

JQuery .css () не работает (возможно, из-за чего-то еще)

Таблицы данных, экспорт в Excel с раскрывающимися значениями

Razor Pages на Asp.Net Core - добавлена страница Razor, но страница не отображается

Дождитесь завершения анимации в цикле

Слайдер jquery slick.js и фильтрация на основе атрибутов данных

Нужен ли jQuery-MD5 для работы jquery?

Как получить уникальный идентификатор кнопки из цикла while? (PHP)

Граница css не отображается в таблице при добавлении в div

Ответы 2

Другие вопросы по теме

Похожие вопросы