Question

我有一个表格，其中的元素超出了模态：

<table class="table" style="margin-bottom:15px;border: 1px solid #DDD;">
    <tbody><tr><td class="text-left" style="color: #FFF;background: #73879C;"><b>textextext:</b></td><td rowspan="4" style="border-left: 1px solid #DDD;"><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image1...jpeg</button></a><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image2...jpeg</button></a><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image3...jpeg</button></a><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image4...jpeg</button></a></td></tr>
    <tr><td class="text-left">textextext</td></tr>
    <tr><td class="text-left" style="color: #FFF;background: #73879C;"><b>textextext:</b></td></tr>
    <tr><td class="text-left">textextext</td></tr>
</tbody></table>

我尝试使用自动换行，但是它仍然相同，我想在该表格单元格内调整这些元素。

模码：

<div class="modal fade" id="myModal" role="dialog" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">textextex</h4>
</div>
<div class="modal-body"><table class="table tblTrad_Rev" style="margin-bottom:15px;border: 1px solid #DDD;"><tbody>
<tr><td class="text-left" style="color: #FFF;background: #73879C;"><b>textet:</b></td><td rowspan="4" style="border-left: 1px solid #DDD;"><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;margin-bottom:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image1...JPG</button></a> <a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;margin-bottom:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image2...JPG</button></a> <a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;margin-bottom:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image3...JPG</button></a> <a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;margin-bottom:5px;"><i class="fa fa-file-text" aria-hidden="true"></i>image4...JPG</button></a></td></tr>
<tr><td class="text-left">Ltextextex</td></tr>
<tr><td class="text-left" style="color: #FFF;background: #73879C;"> 
<b>textet:</b></td></tr>
<tr><td class="text-left">textextex</td></tr></tbody>
</table></div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div> 
</div>
</div>

我该如何解决？

我需要您的帮助。

Answer 1

使用引导程序，您可以处理此行为。

P.S：我在右侧的单元格中添加了更多条目，向您展示示例。

请参阅

<!DOCTYPE html>
<html>
<head>
	<title>test</title>
		<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>


<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Display modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <table class="table" style="margin-bottom:15px;border: 1px solid #DDD;">
    <tbody><tr><td class="text-left" style="color: #FFF;background: #73879C;"><b>textextext:</b></td><td rowspan="4" style="border-left: 1px solid #DDD;"><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image1...jpeg</button></a><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image2...jpeg</button></a><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image1...jpeg</button></a><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image2...jpeg</button></a><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image1...jpeg</button></a><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image2...jpeg</button></a><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image1...jpeg</button></a><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image2...jpeg</button></a><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image3...jpeg</button></a><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image4...jpeg</button></a></td></tr>
    <tr><td class="text-left">textextext</td></tr>
    <tr><td class="text-left" style="color: #FFF;background: #73879C;"><b>textextext:</b></td></tr>
    <tr><td class="text-left">textextext</td></tr>
</tbody></table>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>


<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script type="text/javascript" src="index.js"></script>
</body>
</html>

调整表格单元格内的元素

1 个答案: