Настроить элементы внутри ячейки таблицы <td> - PullRequest
Новая
       7

Настроить элементы внутри ячейки таблицы <td>

0 голосов
/ 15 ноября 2018

У меня есть таблица с элементами, которая выходит за пределы модальной:

enter image description here

<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>

Как это исправить?

Мне нужна ваша помощь.

1 Ответ

0 голосов
/ 15 ноября 2018

С помощью начальной загрузки вы можете справиться с этим поведением.

PS: я добавил больше записей в правой ячейке, чтобы показать вам пример.

Пожалуйста, посмотрите 

<!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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...