如何删除table td border

Question

我不知道出了什么问题。我试过崩溃但没有成功。有谁知道这是什么以及它为什么会发生？ 我的表结构如下：

  

2018年编辑

哇我问白痴，但那时候我是html的新手，原谅这个。因此，经过1年html js的经验，css告诉我，当我将border-collapse:collapse放在桌面容器上时会发生这种情况

setInterval(function(){
$('table').toggleClass('collapse')
},2000)

table{
width:100%;
}
td,th{
border:1px solid black
}
.collapse{
border-collapse:collapse;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>

<thead>
<tr>
<th>header 1</th>
<th>header 2</th>
<th>header 3</th>
<th>header 4</th>
<th>header 5</th>
</tr>
</thead>
<tbody>
<tr>

<td>data1</td>
<td>data2</td>
<td>data3</td>
<td>data4</td>
<td>data5</td>

</tr>
<tr>

<td>data1</td>
<td>data2</td>
<td>data3</td>
<td>data4</td>
<td>data5</td>

</tr>
<tr>

<td>data1</td>
<td>data2</td>
<td>data3</td>
<td>data4</td>
<td>data5</td>

</tr>
<tr>

<td>data1</td>
<td>data2</td>
<td>data3</td>
<td>data4</td>
<td>data5</td>

</tr>
<tr>

<td>data1</td>
<td>data2</td>
<td>data3</td>
<td>data4</td>
<td>data5</td>

</tr>
<tr>

<td>data1</td>
<td>data2</td>
<td>data3</td>
<td>data4</td>
<td>data5</td>

</tr>
<tr>

<td>data1</td>
<td>data2</td>
<td>data3</td>
<td>data4</td>
<td>data5</td>

</tr>
<tr>

<td>data1</td>
<td>data2</td>
<td>data3</td>
<td>data4</td>
<td>data5</td>

</tr>
<tr>

<td>data1</td>
<td>data2</td>
<td>data3</td>
<td>data4</td>
<td>data5</td>

</tr>
<tr>

<td>data1</td>
<td>data2</td>
<td>data3</td>
<td>data4</td>
<td>data5</td>

</tr>
<tr>

<td>data1</td>
<td>data2</td>
<td>data3</td>
<td>data4</td>
<td>data5</td>

</tr>
<tr>

<td>data1</td>
<td>data2</td>
<td>data3</td>
<td>data4</td>
<td>data5</td>

</tr>
<tr>

<td>data1</td>
<td>data2</td>
<td>data3</td>
<td>data4</td>
<td>data5</td>

</tr>
<tr>

<td>data1</td>
<td>data2</td>
<td>data3</td>
<td>data4</td>
<td>data5</td>

</tr>


</tbody>

</table>

<i>You will see there is space between border. At that moment i was asking how to collapse those space between border.
So 1 dude tell me to put <pre style='color:red;font-weight:600'>border-collapse:collapse</pre> on table tag. Reason why i edit this question is for later for help for poor souls like me like green as grass on html Hope you understand this 
</i>

<thead>
  <tr>
    <th>1</th>
    <th>2</th>
    <th>3</th>
    <th>6</th>
    <th>5</th>
    <th>6</th>
    <th>7</th>
    <th>8</th>
    <th>9</th>
    <th>10</th>
    <th>11</th>
    <th>12</th>
  </tr>
</thead>
<tbody>
  <td>1</td>
  <td>2</td>
  <td>3</td>
  <td>4</td>
  <td>5</td>
  <td>6</td>
  <td>7</td>
  <td>8</td>
  <td>9</td>
  <td>10</td>
  <td>11</td>
  <td>12</td>
</tbody>

Css只有 border-bottom: 1px solid "color code" ，如下图所示：

这是fiddle。真正的问题解决者请站起来！

所有边界都不完整。和这张照片中的边界一样。

Answer 1

删除单元格间距的两种方法：

1. 将public function index() { $user= $this->set('users', $this->paginate()); $this->set('user', $user); $this->set('_serialize', ['user']); } 定义为：

   table

2. 添加CSS：

   <table border="0" cellspacing="0" cellpadding="0">

   OR：

   table {
       border-collapse: collapse;
   }
   

JSFiddle：https://jsfiddle.net/sahero/wngu28m4/1/