Как сделать, чтобы изображение и таблица были в одной строке?

Question

[Lord_North]

Есть код:

<div class="GL" id="lgDemo">
	<ul class="GL2" id="id01">
		<li>
			<a class="qwek" href="somelink">
				<img alt="text" src="somelink"/>
				<table  style="border: 0px solid;border-collapse: collapse;"></table>
			</a>
		</li>
		<li></li>
		...
	</ul>
</div>

.GL ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 5px; 
}
.GL.grid  ul li .qwek img {
	height: auto;
	width: 200px;
}
.GL.grid  ul li .qwek table {
	width: auto;
}

В результате получается 2 колонки. Так как ширина одной колонки 1fr, то на разных устройствах она имеет разную ширину. Я бы хотел, чтобы изображения и таблица были в одной строке. Изображения имеют неизменяемую ширину 200px. Осталось сделать так, чтобы таблица не переходила на новую строку.

Comments

[Kentavr16]

А почему бы не задать для li display flex, justify content:space between к примеру? Сложно понять чего именно вы хотите добиться.

[Spartak (Web-StyleStudio)]

Укажите для ссылки

a.qwek {
	display: flex;
}