如何用div替换表格按钮

如何解决如何用div替换表格按钮

我正在尝试将此表转换为 div，以便为在线课程创建主页。有人可以帮我在 div 而不是表格中设置横幅图像和按钮的样式吗？这是示例代码：

<table class="tg" style="width: 785.948px;" cellspacing="2">
<tbody>
<tr>
<th class="tg-baqh" style="width: 726.948px;" colspan="5"><img src="https://canvas.ubc.ca/courses/1755/files/187001/preview" alt="TBLE banner-2.png" width="808" height="166" data-api-endpoint="https://canvas.ubc.ca/api/v1/courses/1755/files/187001" data-api-returntype="File" /></th>
</tr>
<tr>
<td class="tg-6k2t" style="width: 130px; text-align: center;"><a id="" class="btn btn-small btn-primary" style="width: 141px; height: 21px;" title="Before We Meet" href="https://canvas.ubc.ca/courses/1755/modules/11024" data-api-endpoint="https://canvas.ubc.ca/api/v1/courses/1755/modules/11024" data-api-returntype="Module">Link 1</a></td>
<td class="tg-6k2t" style="width: 130px; text-align: center;"><a id="" class="btn btn-small btn-primary" style="width: 135px; height: 21px;" title="Wk 1: discover" href="https://canvas.ubc.ca/courses/1755/modules/11025" data-api-endpoint="https://canvas.ubc.ca/api/v1/courses/1755/modules/11025" data-api-returntype="Module">Link 2</a></td>
<td class="tg-6k2t" style="width: 130px; text-align: center;"><a id="" class="btn btn-small btn-primary" style="width: 141px; height: 21px;" title="Wk 2: Design" href="https://canvas.ubc.ca/courses/1755/modules/11026" data-api-endpoint="https://canvas.ubc.ca/api/v1/courses/1755/modules/11026" data-api-returntype="Module">Link 3</a></td>
<td class="tg-6k2t" style="width: 130px; text-align: center;"><a id="" class="btn btn-small btn-primary" style="width: 141px; height: 21px;" title="Week 3: Deliver" href="https://canvas.ubc.ca/courses/1755/modules/11027" data-api-endpoint="https://canvas.ubc.ca/api/v1/courses/1755/modules/11027" data-api-returntype="Module">Link 4</a></td>
<td class="tg-6k2t" style="width: 130px; text-align: center;"><a id="" class="btn btn-small btn-primary" style="width: 141px; height: 21px;" title="Week 3: Deliver" href="https://canvas.ubc.ca/courses/1755/modules/11027" data-api-endpoint="https://canvas.ubc.ca/api/v1/courses/1755/modules/11027" data-api-returntype="Module">Link 5</a></td>
</tr>
</tbody>
</table>

解决方法

只需使用 Flex 和 CSS 的魔力来调整您的布局。

<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=yes"/>
<title> Test Page </title>
<!-- link rel="stylesheet" href="common.css" media="screen" -->
<style>
 .tg { width: 785.948px; }
 .tg-bagh { width: 726.948px; }
 .tg-6k2t { width: 130px; text-align: center; }
 a { width: 135px; height: 21px; }

 .wrapper {
    display: flex;
    flex-wrap: wrap;
    margin: 0.2em;
    padding: 0.2em;
 }
 .wrapper > div {
    border: 2px solid black;
    margin: 0.2em;
    padding: 0.2em;
 }

/*
 FileName -     styles.css
 Description -  CSS code for making the image responsive by setting the value of four properties
                such as display,margin-left,margin-right,width
 Author -       Tanu Nanda Prabhu
*/
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}
</style>

</head><body>

<div class="tg-baqh center">
 <img src="https://canvas.ubc.ca/courses/1755/files/187001/preview"
  alt="TBLE banner-2.png"
  width="100%" height="166"
  data-api-endpoint="https://canvas.ubc.ca/api/v1/courses/1755/files/187001"
  data-api-returntype="File" />
</div>

<div class="wrapper">

 <div class="tg-6k2t">
  <a id="" class="btn btn-small btn-primary"
  title="Before We Meet"
  href="https://canvas.ubc.ca/courses/1755/modules/11024"
  data-api-endpoint="https://canvas.ubc.ca/api/v1/courses/1755/modules/11024"
  data-api-returntype="Module">Link 1</a>
 </div>

 <div class="tg-6k2t">
  <a id="" class="btn btn-small btn-primary"
  title="Wk 1: Discover"
  href="https://canvas.ubc.ca/courses/1755/modules/11025"
  data-api-endpoint="https://canvas.ubc.ca/api/v1/courses/1755/modules/11025"
  data-api-returntype="Module">Link 2</a>
 </div>

 <div class="tg-6k2t">
  <a id="" class="btn btn-small btn-primary"
  title="Wk 2: Design"
  href="https://canvas.ubc.ca/courses/1755/modules/11026"
  data-api-endpoint="https://canvas.ubc.ca/api/v1/courses/1755/modules/11026"
  data-api-returntype="Module">Link 3</a>
 </div>

 <div class="tg-6k2t">
  <a id="" class="btn btn-small btn-primary"
  title="Week 3: Deliver"
  href="https://canvas.ubc.ca/courses/1755/modules/11027"
  data-api-endpoint="https://canvas.ubc.ca/api/v1/courses/1755/modules/11027"
  data-api-returntype="Module">Link 4</a>
 </div>

 <div class="tg-6k2t">
  <a id="" class="btn btn-small btn-primary"
  title="Week 3: Deliver"
  href="https://canvas.ubc.ca/courses/1755/modules/11027"
  data-api-endpoint="https://canvas.ubc.ca/api/v1/courses/1755/modules/11027"
  data-api-returntype="Module">Link 5</a>
 </div>

</div>
</body></html>

如果您定义了更多现有的 CSS，可以提高响应速度一开始删除了所有内联 CSS 语句。