Табличная вёрстка

153

23 сентября 2019, 15:40

Имеется таблица 20х20. На каждом из столбцов таблицы нужно расположить фишку, которая занимает сразу две строки и при этом имеет три строчки текста, одна из которых должна попадать на разделение строк в таблице. При этом верхняя и нижняя часть фишки при нажатии должны вызывать разные функции. Как решить такую задачу? Пробовал с абсолютным позиционированием и пересчетом координат в блоке для каждого элемента, но, мне кажется, это далеко не самое изящное решение. Пробовал так же брать за позицию элемента конкретную ячейку, при этом выползая за её границы вниз на высоту нижней ячейки. Может кто-то подсказать красивое решение?

Answer 1

Сделал для таблицы меньшего объема, но суть, надеюсь понятна...)

const colors = ['red', 'green', 'blue']; 
 
$('p').on('click', (e) => { 
  const p = e.target; 
 
  switch ($(p).text()) { 
    case 'Text 1': 
      sayHi(); 
      break; 
    case 'Text 2': 
      // do something 
      break; 
    case 'Text 3': 
      sayHello(); 
      break; 
  } 
 
  $(p).css('color', colors[Math.floor(Math.random() * colors.length)]); 
}); 
 
const sayHi = () => { 
  alert('Hi!'); 
} 
 
const sayHello = () => { 
  alert('Hello!'); 
}

table { 
  border-collapse: collapse 
} 
 
tr {} 
 
td { 
  border: 1px solid black; 
  padding: 0; 
  position: relative; 
} 
 
div { 
  background-color: yellow; 
  border: 1px solid black; 
} 
 
div:before { 
  content: ''; 
  background-color: black; 
  display: block; 
  height: 1px; 
  left: 0; 
  position: absolute; 
  top: calc(50% - 1px); 
  width: 100%; 
} 
 
p { 
  cursor: pointer; 
  margin: 0; 
  padding: 5px; 
  text-align: center; 
} 
 
p:nth-child(2) { 
  background-color: yellow; 
  border: 1px solid black; 
  margin: 0 5px; 
  position: relative; 
} 
 
p:hover { 
  color: gray; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<table> 
  <tr> 
    <td rowspan="2"> 
      <div> 
        <p>Text 1</p> 
        <p>Text 2</p> 
        <p>Text 3</p> 
      </div> 
    </td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
  </tr> 
  <tr> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
  </tr> 
  <tr> 
    <td></td> 
    <td rowspan="2"> 
      <div> 
        <p>Text 1</p> 
        <p>Text 2</p> 
        <p>Text 3</p> 
      </div> 
    </td> 
    <td></td> 
    <td></td> 
    <td></td> 
  </tr> 
  <tr> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
  </tr> 
  <tr> 
    <td></td> 
    <td></td> 
    <td rowspan="2"> 
      <div> 
        <p>Text 1</p> 
        <p>Text 2</p> 
        <p>Text 3</p> 
      </div> 
    </td> 
    <td></td> 
    <td></td> 
  </tr> 
  <tr> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
  </tr> 
  <tr> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td rowspan="2"> 
      <div> 
        <p>Text 1</p> 
        <p>Text 2</p> 
        <p>Text 3</p> 
      </div> 
    </td> 
    <td></td> 
  </tr> 
  <tr> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
  </tr> 
  <tr> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td rowspan="2"> 
      <div> 
        <p>Text 1</p> 
        <p>Text 2</p> 
        <p>Text 3</p> 
      </div> 
    </td> 
  </tr> 
  <tr> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
  </tr> 
</table>

Answer 2

Only html/css:

<table style="border:1px solid #000;" cellspacing="0" cellpadding="0"> 
  <tr> 
    <td height="20" colspan="3" align="center"> 
      1 
    </td> 
  </tr> 
  <tr> 
    <td height="10" width="10" style="border-bottom:1px solid #000;">&nbsp;</td> 
    <td rowspan="2" height="20" width="50" align="center" style="border: 1px solid #000;"> 
      2 
    </td> 
    <td height="10" width="10" style="border-bottom:1px solid #000;">&nbsp;</td> 
  </tr> 
  <tr> 
    <td height="10">&nbsp;</td> 
    <td height="10">&nbsp;</td> 
  </tr> 
  <tr> 
    <td height="20" colspan="3" align="center"> 
      3 
    </td> 
  </tr> 
</table>

Создание сайта для строительной компании в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Скрыть содержимое блока при клике на jquery

Вот у меня есть два блока list, и мне нужно чтобы при клике на list-date пряталось содержимое блока list-block именно в том блоке list, где было кликнуто...

170

HTML

Как сделать background на всю ширину экрана, если его родитель не полной длины

Делаю шапку для сайтаСтолкнулся с проблемой: я хочу чтобы все содержимое сайта хранилось в рамках одного общего контейнера (wrapper) который...

151

HTML

webRTC настройка

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

136

Files содержит недопустимое значение

Работаю с Visual Studio 2012, столкнулась с ошибкой:

161