Javascript 使表格单元格成为同一行并使其看起来像按钮

下面有一段代码，每当用户单击该行时，它都会提醒单元格的值。问题是，我想试着让细胞看起来像按钮，然后把它们放在同一卷上。我不太确定这是否可能实现。任何帮助都将不胜感激，谢谢

var obj2={}；
var key3=“汽车”；
obj2[key3]=“丰田”、“奥迪”、“梅赛德斯”、“法拉利”、“吉普”、“本田”、“日产”、“兰博基尼”]；
var myArray3=[]；
myArray3.推送（obj2）；
var bodyString=''；
变量头串=“”；
$.each（obj2[key3]，函数（索引）{
bodyString+=（''+obj2[key3][index]+''）；
});
头串+=（“+”车“+”）；
$（'.carsclass tbody'）.html（bodyString）；
$（'.carsclass thead'）.html（头串）；
$（文档）.ready（函数（）{
$（“#carsid td”）。单击（函数（）{
getval（本）；
});
});
函数getval（cel）{
警报（cel.innerHTML）；
}

.class{
字体系列：开放式SAN；
}
.中心{
显示器：flex；
调整内容：中心
}
斯基尔斯先生{
左边框：1px实心#AAA5A4；
右边框：1px实心#AAA5A4；
}
桌子{
浮动：左；
边界塌陷：塌陷；
宽度：70%
}
运输署{
左边框：1px实心#AAA5A4；
右边框：1px实心#AAA5A4；
填充顶部：8px；
左侧填充：11px；
字体大小：15px；
}
th{
字体大小：正常；
边框底部：1px实心#AAA5A4；
垫底：5px；
}
div{
边缘底部：50px；
}

使用下面的css

<style>
#carsid {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

#carsid td, #customers th {
    border: 1px solid #ddd;
    padding: 8px;
    cursor: pointer;
}

#carsid tr:nth-child(even){background-color: #f2f2f2;}

#carsid tr:hover {background-color: #ddd;}

#carsid th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: #4CAF50;
    color: white;
}
</style>

#卡希德{
字体系列：“投石机MS”，Arial，Helvetica，无衬线；
边界塌陷：塌陷；
宽度：100%；
}
#carsid td，#客户{
边框：1px实心#ddd；
填充：8px；
光标：指针；
}
#carsid tr:n个子（偶数）{背景色：#f2f2；}
#carsid tr:hover{背景色：#ddd；}
#卡希德{
填充顶部：12px；
垫底：12px；
文本对齐：左对齐；
背景色：#4CAF50；
颜色：白色；
}

我已经更改了一些脚本和CSS以实现所需的输出，但由于表的原因，在这里您无法获得与给定图像完全相同的外观

var obj2={}；
var key3=“汽车”；
obj2[key3]=“丰田”、“奥迪”、“梅赛德斯”、“法拉利”、“吉普”、“本田”、“日产”、“兰博基尼”]；
var myArray3=[]；
myArray3.推送（obj2）；
var bodyString=''；
变量头串=“”；
$.each（obj2[key3]，函数（索引）{
bodyString+=（''+obj2[key3][index]+''）；
});
bodyString+=''；
头串+=（“+”车“+”）；
$（'.carsclass tbody'）.html（bodyString）；
$（'.carsclass thead'）.html（头串）；
$（文档）.ready（函数（）{
$（“#carsid td”）。单击（函数（）{
getval（本）；
});
});
函数getval（cel）{
警报（cel.innerHTML）；
}

.class{
字体系列：开放式SAN；
}
.中心{
显示器：flex；
调整内容：中心
}
桌子{
浮动：左；
边界塌陷：塌陷；
宽度：70%
}
运输署{
边界：0；
填充：8px 10px；
左侧填充：11px；
字体大小：15px；
边界半径：50px；
背景色：#007bff；
}
th{
字体大小：正常；
边界：0；
填充：10px0；
}
div{
边缘底部：50px；
}

使用吹扫代码

  td {
      border-width: 1px;
      border-radius: 50px;
      border-color:black;  
      padding: 10px;
      cursor:pointer;
      font-size: 15px;
      background-color: #9fc5e8;
    }

    th {
      font-weight: normal;
      border: 0;
      padding: 10px 0;
    }

    div {
      margin-bottom: 50px;
    }

---

这里是工作示例

这里是使用

flex-box

而不是

table

的方法

HTML 结果

以下是工作示例：

现在阅读其中一条评论，如果OP的用户希望一行只有5辆车，您可以轻松地在

按钮中添加样式：

#cars-container button {
    ...
    width: calc(100% / 5 - 2 * .25rem); <!-- Percentage - margin left - margin right -->
}


然后在小型设备上（横向手机、576px及以上），我可能每行只需要2个项目

@media (min-width: 576px) {
    #cars-container {
        flex-flow: row wrap;
    }

    #cars-container button {
       width: calc(100% / 2 - 2 * .25rem);
    }
}

@media (min-width: 768px) {
    #cars-container {
        width: calc(100% / 3 - 2 * .25rem);
    }
}


在中型设备（平板电脑、768px及以上）上，我可能每行只需要3个项目

@media (min-width: 576px) {
    #cars-container {
        flex-flow: row wrap;
    }

    #cars-container button {
       width: calc(100% / 2 - 2 * .25rem);
    }
}

@media (min-width: 768px) {
    #cars-container {
        width: calc(100% / 3 - 2 * .25rem);
    }
}


你有主意了。您只需更改每行所需项数的除数

以下是断点的工作示例：
您是否必须在表中执行？是否必须使用表元素？允许您使用flexbox吗？@DavidLiang，只要功能保持不变alright@Bobby：请看下面我的帖子！它看起来仍然像一个正常的表，我正在努力实现smth像上面的图片哦，对不起，无法看到你的图片，因为添加了块。事实上，我认为这些不是细胞，这些是按钮。不一定是按钮，只是想让它看起来像这样。谢谢，这正是我要找的，但不管怎样，设置一个阈值，比如一行只有5个单元格？哦，是的，非常感谢，但是有没有办法设置一个阈值，比如一行只有5个单元格？如果你想要一行中有固定数量的元素然后你必须通过放置计数器等来改变一些脚本
@media (min-width: 576px) {
    #cars-container {
        flex-flow: row wrap;
    }

    #cars-container button {
       width: calc(100% / 2 - 2 * .25rem);
    }
}

@media (min-width: 768px) {
    #cars-container {
        width: calc(100% / 3 - 2 * .25rem);
    }
}