Данные строки таблицы выравниваются по вертикали

avatar
aziz
8 апреля 2018 в 05:36
78
2
-1

В моем проекте у меня есть таблица контактов с некоторым информационным столбцом, как показано ниже

<table>
   <thead>
       <tr>
         <th>Name</th>
         <th>Designation</th>
         <th>Organization</th>
         <th>Address</th>
       </tr>
   </thead>
   <tbody>
       <tr>
         <td>Aziz</td>
         <td>Executive</td>
         <td>BIBT</td>
         <td>Dhaka</td>
       </tr>
       <tr>
         <td>Mizan</td>
         <td>Manager</td>
         <td>BIBT</td>
         <td>Dhaka</td>
       </tr>
    </tbody>
</table>

Результат этой формы, как показано ниже

Name    Designation    Organization     Address
----   ------------   --------------   ----------
Aziz    Executive      BIBT             Dhaka
Mizan   Manager        BIBT             Dhaka

Но в моем случае мне нужно другое представление для этой таблицы для печати, которое покажет результат, как показано ниже,

  | Aziz            |  |     Mizan           |
  | Executive, BUBT |  |     Manager, BUBT   |
  | Dhaka           |  |     Dhaka           |

Как мне добиться такого макета таблицы? во-первых, я использую плагин с данными, и мне нужен этот макет только для печати. Любая помощь приветствуется.

Источник

Ответы (2)

avatar
Hossein Najafi
8 апреля 2018 в 05:55
-2

<table>
   <tbody>
<thead>
       <tr>
         <td>Aziz</td>
         <tr>
           <td>Executive <span> BIBT </span></td>
     </tr>
<tr>
  <td>Dhaka</td>
     </tr>
       </thead>
  </tbody>
</table>
avatar
Amir Saleem
8 апреля 2018 в 05:49
1

Вы можете транспонировать таблицу с помощью javascript. Я предполагаю, что вы используете jquery,

Во-первых, вам нужно немного изменить HTML-разметку, Вы можете скрывать и отображать элементы на основе медиа-запросов CSS, поэтому я добавляю соответствующие классы в диапазон и т.д.

  <table>
   <thead>
       <tr>
         <th>Name</th>
         <th>Designation</th>
         <th>Organization</th>
         <th>Address</th>
       </tr>
   </thead>
   <tbody>
       <tr>
         <td>Aziz</td>
         <td>Executive<span class = 'display-on-print'> ,BIBT</span></td>
         <td class = 'hide-on-print'>BIBT</td>
         <td>Dhaka</td>
       </tr>
       <tr>
         <td>Mizan</td>
         <td>Manager <span display-on-print> ,BIBT</span></td>
         <td class = 'hide-on-print'>BIBT </td>
         <td>Dhaka</td>
       </tr>
    </tbody>
 </table>
 <button>Transpose</button>

Теперь вы можете использовать jquery для переноса таблицы,

$("button").click(function(){
    $("table").each(function() {
        var $this = $(this);
        var newrows = [];
        $this.find("tr").each(function(){
            var i = 0;
            $(this).find("td").each(function(){
                i++;
                if(newrows[i] === undefined) { newrows[i] = $("<tr></tr>"); }
                newrows[i].append($(this));
            });
        });
        $this.find("tr").remove();
        $.each(newrows, function(){
            $this.append(this);
        });
    });

    return false;
});
aziz
8 апреля 2018 в 05:59
0

Могу ли я экспортировать новый макет на другую вкладку для печати и сохранить свою основную таблицу нетронутой?

Amir Saleem
8 апреля 2018 в 06:07
0

Вам это не нужно. Предоставленный мной метод транспонирует таблицу, поэтому, если вы вызовете функцию дважды, она снова транспонирует таблицу в ее исходной форме, поэтому ваш подход должен быть таким: transpose() --> window.print() --> transpose() . Это перенесет таблицу, откроет вкладку печати и снова перенесет таблицу обратно в исходное состояние.