Как отобразить 2 изображения в формате данных?

Question

Я хочу отобразить 2 изображения в таблице, используя Datatable и Laravel 5.7.Изображения отображаются, но таблица просмотра не подходит.

Это мой HTML-код для таблицы:

<div class="col-sm-4">
   <div class="row">
      <table id="tableData" class="table table-bordered table-striped">
         <thead>
             <tr style="background-color:#3896D6;">
                <th style="vertical-align: middle!important; text-align: center!important; color: white;" colspan="2">Image Data</th>
             </tr>                   
             <tr>
                 <th style="vertical-align: middle!important; text-align: center!important;">Image 1</th>
                 <th style="vertical-align: middle!important; text-align: center!important;">Image 2</th>
             </tr>
         </thead>
      </table>
   </div>
</div>

Вот как я рендеринг изображения в таблицу

$('#tableData').DataTable().destroy();
    $('#tableData').dataTable({
        paging: false,
        info : false,
        searching: false,
        ajax : {
            url : 'monitoring/getphoto/'+id,
            method : 'GET',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            }
        },
        columns : [
            { 
                "render": function (data, type, row) {
                    if (row.photo_position == 1) {
                        return '<img width=100 height=100 src="'+ row.photo_url +'">';
                    }else{
                        return '';
                    }
                }
            },
            {
                "render": function (data, type, row) {
                    if (row.photo_position == 2) {
                        return '<img width=100 height=100 src="'+ row.photo_url +'">';
                    }else{
                        return '';
                    }
                }
            }
        ],
        columnDefs : [
            {
                "targets" : "_all",
                "className": "text-center",
            }
        ]
    });

и это изображение, показанное в таблице:

Вид таблицы не так хорош, так как я могу это исправить?

Answer 1

<thead> с <th> только для заголовка.В вашем случае для «данных изображения».После этой строки вам нужно закрыть <thead> с помощью </thead> и начать с <tbody>.В <tbody> вы используете <td> вместо <th>

Таким образом, ваш код будет выглядеть так:

 <div class="col-sm-4">
    <div class="row">
        <table id="tableData" class="table table-bordered table-striped">
            <thead>
                <tr style="background-color:#3896D6;">
                    <th style="vertical-align: middle!important; text-align: center!important; color: white;" colspan="2">Image Data</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td style="vertical-align: middle!important; text-align: center!important;">Image 1</td>
                </tr>
                <tr>
                    <td style="vertical-align: middle!important; text-align: center!important;">Image 2</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>