How to add an icon floating on top of each table in a webpage when screen size is less than 700px?RSS

• • Reply
  jeffcarter

  Member

  84 Points

  1506 Posts

  How to add an icon floating on top of each table in a webpage when screen size is less than 700px...

  Aug 12, 2016 04:38 PM|jeffcarter|LINK

  How to add an icon floating on top of each table (all table elements)  in a webpage when screen size is less than 700px?

  If screen size is bigger thank 700px, then this icon should NOT be visible.

  Note: I only have access to CSS, so any way to do this by css only?

• • Reply
  mgebhard

  All-Star

  37001 Points

  14925 Posts

  Re: How to add an icon floating on top of each table in a webpage when screen size is less than 7...

  Aug 12, 2016 04:56 PM|mgebhard|LINK

  Use a media query to set the CSS.

  https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

• • Reply
  jeffcarter

  Member

  84 Points

  1506 Posts

  Re: How to add an icon floating on top of each table in a webpage when screen size is less than 7...

  Aug 13, 2016 01:02 AM|jeffcarter|LINK

  Yes, I am familiar with media query but how to add an icon floating on top of each table via CSS?

• • Reply
  mgebhard

  All-Star

  37001 Points

  14925 Posts

  Re: How to add an icon floating on top of each table in a webpage when screen size is less than 7...

  Aug 13, 2016 12:43 PM|mgebhard|LINK

  jeffcarter

  Yes, I am familiar with media query but how to add an icon floating on top of each table via CSS?

  The position, top and left CSS properties control an elements position in the DOM.  You'll need to look at your layout and come up with a style that works.  Post your code if you need assistance.

• • Reply
  muhozayves20...

  None

  0 Points

  1 Post

  Re: How to add an icon floating on top of each table in a webpage when screen size is less than 7...

  Aug 13, 2016 02:22 PM|muhozayves2014|LINK

• • Reply
  Fei Han - MS...

  All-Star

  39156 Points

  5688 Posts

  Microsoft

  Re: How to add an icon floating on top of each table in a webpage when screen size is less than 7...

  Aug 15, 2016 08:40 AM|Fei Han - MSFT|LINK

  Hi jeffcarter,

  jeffcarter

  Note: I only have access to CSS, so any way to do this by css only?

  As far as I know, we could insert content (not html) via ::before selector. Do you want to dynamically insert html elements before <table>?

  @media (max-width: 700px) {
      table::before {
          content: "your content here";
      }
  }
  

  Best Regards,

  Fei Han

  
  MSDN Community Support
  Please remember to "Mark as Answer" the responses that resolved your issue.