Макет таблицы, выравнивание поля

Я хочу отобразить d3 . Текст ( "../static/CSV/Chart_data/Tables/top2.csv" , функция ( данные ) { вар parsedCSV = d3 . CSV . parseRows ( данные ); вар контейнер = d3 . выберите ( "# table1" ) . добавить ( «таблица» ) . selectAll ( «tr» ) . data ( parsedCSV ). enter () , append ( "tr" ) . selectAll ( "td" ) . data ( function ( d ) { return d ; }). введите () . append ( "td" ) . text ( function ( d ) { return d ; }); }); выровнен по центру, и я не знаю, почему я не могу этого сделать ...

Сценарий выглядит следующим образом:

<div id="Access" hidden>                
    <div id="table1"></div>
    <script type="text/javascript" src="../static/scripts/table3.js" charset="utf-8"></script>
</div>

Таблица отображается в середине веб-сайта html с кодом:

table {
    border-collapse: collapse;
    width: 70%;
    overflow-y: scroll;
}

th, td {
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

tr:hover {background-color:#f5f5f5;}

И файл css со стилями:

table

Есть идеи? Благодаря!

javascript,html,css,

0

Ответов: 1

1 принят

Для этого table, который является блочным элементом, чтобы центрировать, вы можете использовать автоматическую разметку, например, такую ??как

Фрагмент стека

table {
    border-collapse: collapse;
    width: 70%;
    overflow-y: scroll;
    margin: 0 auto;             /*  added  */
    border: 1px dotted black    /*  for this demo  */
}

th, td {
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

tr:hover {background-color:#f5f5f5;}
<table>
  <tr><td>Cell with data</td></tr>
</table>

Основываясь на комментарии, я добавил еще 2 образца, как увеличить расстояние между строками / столбцами.

Пример 1 - интервал между ячейками

table {
    border-collapse: seperate;    /*  changed from "collapse"  */
    width: 70%;
    overflow-y: scroll;
    margin: 0 auto;               /*  added  */
    border: 1px dotted black;     /*  for this demo  */
    
    border-spacing: 40px 20px;    /*  added  (need "border-collapse" to be "seperate")  */
}

th, td {
    padding: 8px;
    text-align: left;
    border: 1px solid #ddd;
}

tr:hover {background-color:#f5f5f5;}
<table>
  <tr><td>Cell with data</td><td>Cell with data</td><td>Cell with data</td></tr>
  <tr><td>Cell with data</td><td>Cell with data</td><td>Cell with data</td></tr>
  <tr><td>Cell with data</td><td>Cell with data</td><td>Cell with data</td></tr>
</table>

Пример 2 - заполнение ячейки

table {
    border-collapse: seperate;
    width: 70%;
    overflow-y: scroll;
    margin: 0 auto;               /*  added  */
    border: 1px dotted black;     /*  for this demo  */
}

th, td {
    padding: 28px;                /*  increased value  */
    text-align: left;
    border: 1px solid #ddd;
}

tr:hover {background-color:#f5f5f5;}
<table>
  <tr><td>Cell with data</td><td>Cell with data</td><td>Cell with data</td></tr>
  <tr><td>Cell with data</td><td>Cell with data</td><td>Cell with data</td></tr>
  <tr><td>Cell with data</td><td>Cell with data</td><td>Cell with data</td></tr>
</table>

JavaScript, HTML, CSS,
Похожие вопросы
Яндекс.Метрика