টেবিলের সারি এবং কলামগুলির মধ্যে অযাচিত স্থান কীভাবে সরাবেন?

177

আমি কীভাবে টেবিলের সারি এবং কলামগুলির মধ্যে অতিরিক্ত স্থান সরিয়ে ফেলব।

আমি টেবিলের মধ্যে মার্জিন, প্যাডিং এবং বিভিন্ন সীমান্তের বৈশিষ্ট্য এবং টিআর এবং টিডি পরিবর্তন করার চেষ্টা করেছি।

আমি চাই যে ছবিগুলি একে অপরের পাশে ঠিক একটি বড় চিত্রের মতো দেখায়।

আমি কীভাবে এটি ঠিক করব?

সিএসএস

table {
  border-collapse: collapse;
}

এইচটিএমএল

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title>Tera Byte Video Game Creation Camp</title>
  <link rel="stylesheet" type="text/css" href="style.css"></link>
</head>

<body>
  <table class="mytable" align="center">
    <tr class="header">
      <td colspan="3"><img src="images/home_01.png" /></td>
    </tr>
    <tr class="top">
      <td colspan="3"><img src="images/home_02.png" /></td>
    </tr>
    <tr class="link-row">
      <td><img src="images/home_03.png" /></td>
      <td><img src="images/home_04.png" /></td>
      <td><img src="images/home_05.png" /></td>
    </tr>
    <tr class="link-row">
      <td><img src="images/home_07.png" /></td>
      <td><img src="images/home_06.png" /></td>
      <td><img src="images/home_08.png" /></td>
    </tr>
    <tr class="link-row">
      <td><img src="images/home_09.png" /></td>
      <td><img src="images/home_10.png" /></td>
      <td><img src="images/home_11.png" /></td>
    </tr>
    <tr class="link-row">
      <td><img src="images/home_12.png" /></td>
      <td><img src="images/home_13.png" /></td>
      <td><img src="images/home_14.png" /></td>
    </tr>
    <tr class="bottom">
      <td colspan="3"><img src="images/home_15.png" /></td>
    </tr>
  </table>

</body>

</html>

html css html-table

— জাচ গ্যালান্ট
সূত্র

84

আপনার সিএসএস কোডে এই সিএসএস পুনরায় সেট করুন: ( এখান থেকে )

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

প্যাডিং এবং মার্জিনগুলি থেকে মুক্তি পেয়ে এটি কার্যকরভাবে সিএসএস পুনরায় সেট করবে rid

— vectran
সূত্র

15

আপনি যদি এই মন্তব্যটি পড়েন তবে একটি মন্তব্য আছে: / * টেবিলগুলিতে এখনও মার্কআপে 'সেলস্পেসিং = "0"' প্রয়োজন * /

— ইজেউই

2

আপনি যদি নিজের পৃষ্ঠায় প্রচুর CSS ব্যবহার করেন এবং আপনি এটি পুনরায় সেট করতে না চান তবে কি হবে?

— সিরিয়েন্থ

রিসেট বা কোনও ধরণের ফ্রেমওয়ার্ক ব্যবহার করা এবং সেখান থেকে তৈরি করা সম্ভবত সেরা অনুশীলন। তবে এক্ষেত্রে আপনাকে অবশ্যই প্রতিটি স্টাইল পুনরায় সেট করতে হবে। টেবিল {প্যাডিং: 0 পিএক্স; সীমানা: 0 পিএক্স; সীমান্ত-পতন: পতন; ইত্যাদি} .... আরও তথ্যের জন্য চেকআউট quirksmode.org/css/tables.html ।

— ভেক্টরান

আপনি সেগুলি অনেকগুলি এড়িয়ে যেতে পারেন কারণ এটি কেবল টেবিলগুলির জন্য।

— কাই হাওয়াং

31

এটি অত্যধিক, প্রশ্নের উত্তর দেয় না, এমনকি পুরো রিসেটও নয়। সম্ভবত প্রাসঙ্গিক কোডটি আলাদা করুন, এটি ব্যাখ্যা করুন এবং তারপরে পুনরায় সেট করার পরামর্শ দিন suggest

— স্যান্ডি গিফোর্ড

197

ভেক্টরানের উত্তরে যুক্ত করা: cellspacingক্রস ব্রাউজারের সামঞ্জস্যের জন্য আপনাকে টেবিল উপাদানটিতেও বৈশিষ্ট্য নির্ধারণ করতে হবে ।

<table cellspacing="0">

সম্পাদনা করুন (সম্পূর্ণতার জন্য আমি এই 5 বছর পরে প্রসারিত করছি :):

ইন্টারনেট এক্সপ্লোরার 6 এবং ইন্টারনেট এক্সপ্লোরার 7 আপনাকে সারণি বিশিষ্টতা হিসাবে সরাসরি সেলস্পেসিং সেট করতে হবে , অন্যথায় ব্যবধানটি অদৃশ্য হবে না।

ইন্টারনেট এক্সপ্লোরার 8 এবং পরবর্তী সংস্করণ এবং জনপ্রিয় ব্রাউজারগুলির সমস্ত অন্যান্য সংস্করণ - ক্রোম, ফায়ারফক্স, অপেরা 4+ - সিএসএস সম্পত্তি সীমানা-ফাঁকা স্থান সমর্থন করে ।

সুতরাং ক্রস ব্রাউজারের টেবিল সেল স্পেসিং রিসেট করার জন্য (আইএন 6 ডাইনোসর ব্রাউজার হিসাবে সমর্থন করে), আপনি নীচের কোডের নমুনা অনুসরণ করতে পারেন:

table{
  border: 1px solid black;
}
table td {
  border: 1px solid black; /* Style just to show the table cell boundaries */
}


table.no-spacing {
  border-spacing:0; /* Removes the cell spacing via CSS */
  border-collapse: collapse;  /* Optional - if you don't want to have double border where cells touch */
}

<p>Default table:</p>

<table>
  <tr>
    <td>First cell</td>
    <td>Second cell</td>
  </tr>
</table>

<p>Removed spacing:</p>

<table class="no-spacing" cellspacing="0"> <!-- cellspacing 0 to support IE6 and IE7 -->
  <tr>
    <td>First cell</td>
    <td>Second cell</td>
  </tr>
</table>

স্নিপেট প্রসারিত করুন

— easwee
সূত্র

68

এটি আমার পক্ষে কাজ করেছে:

#table {
  border-collapse: collapse;
  border-spacing: 0;
}

— pagetribe
সূত্র

55

টিডি-তে চিত্রগুলির জন্য, এটি চিত্রগুলির জন্য ব্যবহার করুন:

display: block;

এটি আমার জন্য অযাচিত স্থান সরিয়ে দেয়

— জ্যাকব বার্টেলসেন
সূত্র

9

শুধু জন্য, ইয়াকুবের উত্তর উপরে যোগ imgমধ্যে td,

body {line-height: 0;}
img {display: block; vertical-align: bottom;}

এটি Gmail সহ বেশিরভাগ ইমেল ক্লায়েন্টের জন্য কাজ করে। তবে আউটলুক নয়। দৃষ্টিভঙ্গির জন্য, আপনাকে আরও দুটি ধাপ করতে হবে:

table {border-collapse: collapse;}

এবং প্রতিটি tdউপাদানকে একই heightএবং এতে widthথাকা চিত্রগুলির জন্য সেট করে set উদাহরণ স্বরূপ,

<td width="600" height="80" style="line-height: 80px;">
    <img height="80" src="http://www.website.com/images/Nature_01.jpg" width="600" />
</td>

— hexinpeter
সূত্র

8

table 
{
    border-collapse: collapse;
}

টেবিল কলামগুলি পৃথক করে সমস্ত সীমানা ভেঙে ফেলবে ...

বা চেষ্টা করুন

<table cellspacing="0" style="border-spacing: 0;">

সমস্ত কক্ষ-শূন্যস্থান 0 এবং সীমানার ব্যবধান 0-এ করুন same

মজা কর!

— আমির শাহজাদ
সূত্র

1

<table cellspacing="0" border-spacing: 0;>অবৈধ মার্কআপ! <table cellspacing="0" style="border-spacing: 0;">সঠিক হবে

— ডার্ক ভন গ্রানিজেন

8

মান মেনে চলার জন্য এইচটিএমএল 5 সারণীতে চিত্রগুলির মধ্যে সমস্ত স্থান সরাতে এই সমস্ত CSS যুক্ত করুন:

table { 
    border-spacing: 0;
    border-collapse: collapse;
}
td {
    padding:0px;
}
td img {
    display:block;
}

— totallytotallyamazing
সূত্র

5

এটা চেষ্টা কর,

table{
border-collapse: collapse; /* 'cellspacing' equivalent */
}

table td, 
table th{
padding: 0; /* 'cellpadding' equivalent */
}

— রাকেশ ভাদনাল
সূত্র

4

সেলপ্যাডিং এবং সেলস্পেসিং 0 তে সেট করা সারি এবং কলামগুলির মধ্যে অপ্রয়োজনীয় স্থান সরিয়ে দেবে ...

— বিজয়
সূত্র

3

আমাকে যা করতে হয়েছিল তা হ'ল:

line-height: 0px;

আমার মধ্যে

<tr ...>

— অ্যাঞ্জেল রামেরেজ ইশিয়া
সূত্র

অন্যান্য উত্তরগুলি রয়েছে যা ওপির প্রশ্ন সরবরাহ করে এবং কিছু সময় আগে সেগুলি পোস্ট করা হয়েছিল। উত্তর পোস্ট করার সময়, দয়া করে নিশ্চিত হন যে আপনি একটি নতুন সমাধান যুক্ত করেছেন, বা যথেষ্ট উত্তম ব্যাখ্যা, বিশেষত পুরানো প্রশ্নের উত্তর দেওয়ার সময়।

— help-info.de

1

ফাইলটির শুরুতে এই লাইনটি যুক্ত করা আমার পক্ষে কাজ করেছিল:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

যথাযথ সীমানা বৈশিষ্ট্য নির্ধারণের জন্য CSS সংশোধন করা উপরের লাইনটি যোগ না করা পর্যন্ত কাজ করে না

— অ্যালবার্ট এস
সূত্র

এটি কেবল আমার জন্য কাজ করেছে! +1 এবং আপনাকে ধন্যবাদ! আমি এটি ট্রানজিশনের পরিবর্তে স্ট্রাইককে সেট করেছিলাম।

— স্কট বিগস

0

আপনি কি কলস্প্যান থাকা টিআরগুলি অপসারণ করার চেষ্টা করেছেন এবং দেখুন যে এটি কোনও পরিবর্তন করে?

নির্ভুল টেবিল-ডিজাইনের সাথে নেমে আসার সময় আমি কলসপ্যানস এবং সারিস্প্যানগুলি বেশ বাজে বলে অভিজ্ঞতা অর্জন করেছি। যদি আপনার চিত্রগুলি কলস্প্যান-টিআরগুলি ছাড়া ঠিক মতো দেখা যায়, আমি সেখান থেকে শুরু করে একটি নেস্টেড টেবিলসেট তৈরি করব।

এছাড়াও আপনার স্টাইল.এসএস সম্পূর্ণ বলে মনে হচ্ছে না, সম্ভবত সেখানে কিছু ভুল আছে? আমি কমপক্ষে padding: 0; margin: 0;টেবিলের সাথে যুক্ত করতাম (বা ক্লাসে "Mytable")। নিশ্চিত হয়ে নিন, আপনার ছবিতে ফাঁকা স্থান এবং / অথবা সীমানা নেই (যেমন img { border: 0; }আপনার স্টাইলশীটে যুক্ত করে)।

— Select0r
সূত্র

একটি কলস্পানের সাহায্যে টিআর সরিয়ে নেওয়া কিছুই করে না। প্যাডিং এবং মার্জিন যুক্ত করে কিছু হয় না

— Zach Galant

0

আমার এই সমস্যাটি ছিল এবং বেশ কয়েকটি পোস্টের পরামর্শগুলির মধ্যে কোনওটিই কাজ করে না, আমি সেগুলি সব চেষ্টা করেছিলাম। আমার সমস্যাটি প্রমাণিত হয়েছে যে আমি যে টেবিলটি তৈরি করছিলাম তা অন্য টেবিলে বাসা বাঁধে, এর বৈশিষ্ট্যগুলিতে উত্তরাধিকার সূত্রে প্রাপ্ত। আমার ধারক টেবিলটি ওভাররাইড করা দরকার।

এই উদাহরণে, সোলকটেবলটি টেবিলে ক্লাস is

.SuColTable tr {
    border: none !important;
}

.SuColTable td {
    border-spacing: 0 !important;
    border: none !important;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-right: 0 !important;
}


.SuColTable {
    border-collapse: collapse !important;
    border: none !important;
    border-spacing: 0 !important;
    border-collapse: separate !important;
    padding-left: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
// all padding would be padding: 0 !important

সীমানা-পতন, সীমানা: কোনওটিই নয় এবং সীমান্তের ব্যবধান টেবিল / সারি / কলাম লাইন থেকে মুক্তি পাবে। প্যাডিং 0 টি কল পাত্রে টেবিল থেকে প্যাডিং মুক্ত করে। এটির জন্য প্রতিটি স্টাইলের জন্য আমাকে অন্তর্ভুক্ত করতে হবে, যাতে ধারক টেবিল শৈলীর ওভাররাইড হয়।

আমার প্যাডিং_টপ, বাম এবং নীচে (কেবল প্যাডিংয়ের পরিবর্তে) রয়েছে কারণ আমার আরও দুটি ক্লাস রয়েছে যা প্যাডিং-রাইট নিয়ন্ত্রণ করে।

line-height: 0px;

লাইন-উচ্চতা শূন্য সারিটিকে এক লাইন উচ্চ করে তোলে। আপনার যদি বেশ কয়েকটি লাইন থাকে তবে সেগুলি একটি লাইনে সংকুচিত হয়।

— জর্জ
সূত্র

-2

table{
  border: 1px solid black;
}
table td {
  border: 1px solid black; /* Style just to show the table cell boundaries */
}


table.no-spacing {
  border-spacing:0; /* Removes the cell spacing via CSS */
  border-collapse: collapse;  /* Optional - if you don't want to have double border where cells touch */
}

<p>Default table:</p>

<table>
  <tr>
    <td>First cell</td>
    <td>Second cell</td>
  </tr>
</table>

<p>Removed spacing:</p>

<table class="no-spacing" cellspacing="0"> <!-- cellspacing 0 to support IE6 and IE7 -->
  <tr>
    <td>First cell</td>
    <td>Second cell</td>
  </tr>
</table>

স্নিপেট প্রসারিত করুন

— আইকেণেই কেনেচুকু
সূত্র

অন্যান্য উত্তরগুলি রয়েছে যা ওপির প্রশ্ন সরবরাহ করে এবং কিছু সময় আগে সেগুলি পোস্ট করা হয়েছিল। উত্তর পোস্ট করার সময়, দয়া করে নিশ্চিত হন যে আপনি একটি নতুন সমাধান যুক্ত করেছেন, বা যথেষ্ট উত্তম ব্যাখ্যা, বিশেষত পুরানো প্রশ্নের উত্তর দেওয়ার সময়।

— help-info.de