مشکل border-radius و colspan

مشکل border-radius و colspan

با توجه به تجربه محور بودن نوشته های وبسایت آموزشی camelCase در این نوشته یکی از مشکلاتی که برای تیم ما به وجود آمده را بررسی می کنیم.

اگر با css کار کرده باشید یکی از propertyهایی که با آن حتما اشنا هستید border-radius می باشد؛ کار این خاصیت در css این است که المان مورد نظر شما در بخش لبه ها گرد می کند.

مثلا اگر border-raidus یک مربع را 100درصد کنید آن مربع تبدیل به دایره می شود.

در این نوشته به بررسی مشکل border-radius با خصیصه ی colspan که در html برای جدول ها استفاده می شود را بررسی می کنیم.

خصیصه ی colspan در html متعلق به جدول ها می باشد و کار آن این است که ستون های کنار هم را یکی می کند.

همراه ما باشید.

مشکل border-radius و colspan

ابتدا مشکل را طرح می کنیم؛ جدول زیر را نگاه کنید:

جدول بالا دارای خاصیت border-radius می باشد اما هیچ گرد شدنی در گوشه های مستطیل جدول در کار نیست؛ همچنین دقت کنید که ردیف آخر این جدول سه ستون را به طور کل با خاصیت colspan ترکیب کرده است.

اما ما در نهایت باید نتیجه ی بالا را ببینیم؛ یعنی در واقع توقع داریم بعد از اعمال یک خاصیت border-radius نتیحه ی بالا به وجود بیاید.

کد جدول بالا به شکل زیر می باشد:

<table>
	<thead>
		<tr>
			<td width="10%">#</td>
			<td width="60%">head1</td>
			<td width="30%">head2</td>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td width="20%">1</td>
			<td width="50%">text</td>
			<td width="30%">56132</td>
		</tr>
		<tr>
			<td width="20%">2</td>
			<td width="50%">text</td>
			<td width="30%">56132</td>
		</tr>
		<tr>
			<td width="20%">3</td>
			<td width="50%">text</td>
			<td width="30%">56132</td>
		</tr>
		<tr>
			<td width="20%">4</td>
			<td width="50%">text</td>
			<td width="30%">56132</td>
		</tr>
		<tr>
			<td width="20%">5</td>
			<td width="50%">text</td>
			<td width="30%">56132</td>
		</tr>
		<tr>
			<td width="20%">6</td>
			<td width="50%">text</td>
			<td width="30%">56132</td>
		</tr>
		<tr>
			<td width="20%">7</td>
			<td width="50%">text</td>
			<td width="30%">56132</td>
		</tr>
		<tr>
			<td width="20%">8</td>
			<td width="50%">text</td>
			<td width="30%">56132</td>
		</tr>
		<tr>
			<td width="20%">9</td>
			<td width="50%">text</td>
			<td width="30%">56132</td>
		</tr>
		<tr>
			<td width="20%">10</td>
			<td width="50%">text</td>
			<td width="30%">56132</td>
		</tr>
		<tr>
			<td width="100%" colspan="3">ColSpan</td>
		</tr>
	</tbody>
</table>

بعد از اعمال موارد بالا باید کد css خود را اضافه کنید:

table {
	border-radius: 10px !important;
	border-style: hidden;
	border-collapse: all;
	overflow: hidden;
	border: none;
}

خب اگر به قطعه کد بالا دقت کنید در کنار خاصیت border-radius ما از چهار ویژگی دیگر نیز استفاده کرده ایم.

با کمک خاصیت border-style و border کادر دور جدول را از بین میبریم.

با کمک خاصیت overflow اضافی عناصری که در محوطه ی جدول می باشد را نمایش نمی دهیم.

و راه گشای آموزش فعلی این است که خاصیت border-collapse باعث می شود مشکلی که در این آموزش به آن اشاره کرده ایم حل شود.

اگر روش های بهتری برای گرد کردن اطراف یک جدول در css و عدم مشکل خوردن آن با colspan را دارید در بخش نظرات برای ما بنویسید.

موفق باشید.